# React Bootstrap Alerts

A React Bootstrap alert component with theme colors, icons, outline styles and a close button that fades the alert out. No Bootstrap JavaScript needed.

Use an alert to tell the user something about the page they are on: a change was saved, a payment failed, a trial is about to end. An alert takes a theme color and any content.

`Alert` is a React component that renders Bootstrap's alert markup. With `dismissible`, it gets a close button and fades out with Bootstrap's transition when the user closes it, without Bootstrap's JavaScript. It is in the free and PRO versions of [AdminKit for React](/react/).

## Example

Put the text of an alert in an `.alert-message` element. AdminKit's alerts have no padding of their own.

```html
<div class="alert alert-primary" role="alert">
  <div class="alert-message">Your trial ends in 7 days.</div>
</div>
<div class="alert alert-success" role="alert">
  <div class="alert-message">Your changes have been saved.</div>
</div>
<div class="alert alert-danger" role="alert">
  <div class="alert-message">The payment failed. Check your card details.</div>
</div>
<div class="alert alert-warning" role="alert">
  <div class="alert-message">Your storage is almost full.</div>
</div>
```
```tsx code
import { Alert } from "@/components/bootstrap/alert";

export function Notices() {
  return (
    <>
      <Alert variant="primary">
        <div className="alert-message">Your trial ends in 7 days.</div>
      </Alert>
      <Alert variant="success">
        <div className="alert-message">Your changes have been saved.</div>
      </Alert>
      <Alert variant="danger">
        <div className="alert-message">The payment failed. Check your card details.</div>
      </Alert>
      <Alert variant="warning">
        <div className="alert-message">Your storage is almost full.</div>
      </Alert>
    </>
  );
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `string` | `"primary"` | The color: adds `.alert-<variant>`, such as `success` or `danger` |
| `dismissible` | `boolean` | | Adds a close button; the alert fades out when it is clicked |
| `onClose` | `() => void` | | Called once a dismissed alert has faded out |

Other props, such as `className` and `id`, go to the `.alert` element. The element has `role="alert"`. The component is in `src/components/bootstrap/alert.tsx`.

## Dismissing

Add `dismissible` when the user may close the alert once they have read it. `Alert` then adds a [close button](/react/docs/components/close-button/) as its first child, plus the `.alert-dismissible` and `.fade` classes. A click on the button fades the alert out, and after that the alert renders nothing.

```html
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  <div class="alert-message">
    <strong>Heads up!</strong> Two invoices are past their due date.
  </div>
</div>
```
```tsx code
<Alert variant="warning" dismissible>
  <div className="alert-message">
    <strong>Heads up!</strong> Two invoices are past their due date.
  </div>
</Alert>
```

`Alert` keeps its open state to itself, so no prop closes it or shows it again. If the alert comes from your own data, remove it there in `onClose`, once the alert is gone:

```tsx
import { useState } from "react";
import { Alert } from "@/components/bootstrap/alert";

type Notice = { id: string; type: string; text: string };

export function NoticeList({ initial }: { initial: Notice[] }) {
  const [notices, setNotices] = useState(initial);

  return notices.map((notice) => (
    <Alert
      key={notice.id}
      variant={notice.type}
      dismissible
      onClose={() => setNotices((list) => list.filter(({ id }) => id !== notice.id))}
    >
      <div className="alert-message">{notice.text}</div>
    </Alert>
  ));
}
```

To show a closed alert again, render it with a new `key`.

## Icons and outline styles

An icon shows the kind of message before the user reads it. Put an `.alert-icon` element before the message to add an icon column. `className="alert-outline"` gives the alert a neutral background and a gray border, with the icon column in the theme color. `alert-outline-coloured` also colors the border.

```html
<div class="alert alert-primary alert-dismissible fade show" role="alert">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  <div class="alert-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell align-middle" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
  </div>
  <div class="alert-message">You have 3 new notifications.</div>
</div>
<div class="alert alert-primary alert-outline alert-dismissible fade show" role="alert">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  <div class="alert-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell align-middle" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
  </div>
  <div class="alert-message">You have 3 new notifications.</div>
</div>
```
```tsx code
import { Bell } from "lucide-react";
import { Alert } from "@/components/bootstrap/alert";

export function NotificationAlerts() {
  return (
    <>
      <Alert variant="primary" dismissible>
        <div className="alert-icon">
          <Bell className="align-middle" />
        </div>
        <div className="alert-message">You have 3 new notifications.</div>
      </Alert>
      <Alert variant="primary" className="alert-outline" dismissible>
        <div className="alert-icon">
          <Bell className="align-middle" />
        </div>
        <div className="alert-message">You have 3 new notifications.</div>
      </Alert>
    </>
  );
}
```

## Additional content

An alert can hold more than one line. Headings, paragraphs, a divider and buttons fit in the message. `.alert-heading` styles the heading, and `.alert-link` gives a link the alert's color.

```html
<div class="alert alert-success" role="alert">
  <div class="alert-message">
    <h2 class="h4 alert-heading">Import finished</h2>
    <p>1,240 customers were imported. 3 rows were skipped because the email address was missing.</p>
    <hr>
    <p class="mb-0"><a href="#" class="alert-link">Download the skipped rows</a></p>
  </div>
</div>
```
```tsx code
<Alert variant="success">
  <div className="alert-message">
    <h2 className="h4 alert-heading">Import finished</h2>
    <p>1,240 customers were imported. 3 rows were skipped because the email address was missing.</p>
    <hr />
    <p className="mb-0">
      <a href="#" className="alert-link">Download the skipped rows</a>
    </p>
  </div>
</Alert>
```

## Accessibility

- Every `Alert` has `role="alert"`, so screen readers announce it as soon as it appears. For a message that is not urgent, pass `role="status"`. Props you pass override the default.
- The close button has `aria-label="Close"`.
- Closing an alert removes the button that has the focus. If the alert is part of a task, move the focus to a sensible element in `onClose`.
- Do not rely on the color alone: say in the text what kind of message it is.

## Related

- [Next.js Bootstrap alerts](/nextjs/docs/components/alerts/): the same component in AdminKit for Next.js
- [Bootstrap 5 alerts](/bootstrap/docs/components/alerts/): the alerts of the HTML version
- [Close button](/react/docs/components/close-button/): the button of a dismissible alert
- [Alerts demo](https://react-demo.adminkit.io/ui-alerts)

---

Canonical HTML page: https://adminkit.io/react/docs/components/alerts/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io