Alerts

Alerts are used to display important messages to the user. Not to be confused with toasts.

Signature

Copy
import { Alert } from "tabler-react-2";

<Alert {...props}>{children}</Alert>;

Props

Basic Usage

The Alert component is used to display an alert message.

Copy
<Alert>This is a basic alert.</Alert>

Variants

The Alert component can be used to display different types of alerts. The variant prop accepts a string value of success, failure, warning, info, danger, or dark.

Copy
<Alert variant="success" title="success">
  success alert
</Alert>
<Alert variant="failure" title="failure">
  failure alert
</Alert>

Titles

You can pass a title prop to the Alert component to display a title in boldface and the variant color.

Copy
<Alert title="My awesome title">A card with a title.</Alert>

Dismissible Alerts

You can pass an onDismiss prop to the Alert component to display a close button. When the user clicks the close button, the onDismiss function is called.

Copy
<Alert title="Dismissible alert" onDismiss={() => alert("Alert dismissed!")}>
  A dismissible alert.
</Alert>

Note: The alert component does not manage its own state. If you want the alert to go away when the user clicks the close button, you must unmount it yourself.

Icons

You can pass an icon prop to the Alert component to display an icon in the alert.

Copy
<Alert title="Dismissible alert" icon={<IconAlertCircle />}>
  An alert with an icon.
</Alert>
<Alert title="Dismissible alert" icon={<IconAlertCircle />} variant="success">
  An alert with an icon and variant.
</Alert>