Alert Banner
Alert banners show pressing and high-signal messages, such as system alerts. They’re meant to be noticed and prompt users to take action.
New update available!Version 2.0 has been released.
Variants
InfoYour free trial will expire in 3 days.
SuccessYour changes have been saved.
WarningYour session is about to expire.
ErrorThe application encountered an error.
With close button
Dismissible alertClick the X to close this alert.
Component props
| Name | Type | Description |
|---|---|---|
| title | ReactNode | Banner title |
| description | ReactNode | Banner description text |
| icon | ReactNode | Custom icon (overrides variant icon) |
| variant | AlertVariant | "info" | "success" | "warning" | "error" (default: "info") |
| align | Alignment | "start" | "center" | "end" |
| allowClose | boolean | Shows a close button |
| onClose | () => void | Called when close button is clicked |
| children | ReactNode | Action buttons or other content |