React Bootstrap Alerts

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.

ExampleCopy Anchor Link

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

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>
    </>
  );
}

PropsCopy Anchor Link

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.

DismissingCopy Anchor Link

Add dismissible when the user may close the alert once they have read it. Alert then adds a 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.

<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:

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 stylesCopy Anchor Link

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.

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 contentCopy Anchor Link

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.

<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>

AccessibilityCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• Next.js Bootstrap alerts: the same component in AdminKit for Next.js
• Bootstrap 5 alerts: the alerts of the HTML version
• Close button: the button of a dismissible alert
• Alerts demo