Alert
A composable alert component for displaying important messages with multiple variants, appearances, and sizes.
Variants
Default
This is a default alert message.
Destructive
This is a destructive alert message.
Success
This is a success alert message.
Warning
This is a warning alert message.
Info
This is an info alert message.
Appearances
Default
Light background with colored text.
Outline
Border with light background.
Filled
Solid background with white text.
Sizes
Small Alert
This is a small alert with compact padding.
Medium Alert
This is the default medium alert.
Large Alert
This is a large alert with bigger padding.
With Icon
Success
Your changes have been saved successfully.
Information
This feature is currently in beta.
Warning
Your session is about to expire.
Error
Something went wrong. Please try again.
With Close
Dismissible Alert
Click the close button to dismiss this alert.
With Action
Update Available
A new version is available. Update now to get the latest features.
API Reference
Alert
Root container for alert messages. Renders with role="alert" by default.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'destructive' | 'success' | 'warning' | 'info' | 'default' | Color variant of the alert |
| appearance | 'default' | 'outline' | 'filled' | 'default' | Visual appearance style |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the alert |
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"div"> | - | Standard div element props |
AlertContent
Wrapper for title and description with vertical spacing.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"div"> | - | Standard div element props |
AlertIcon
Icon slot that inherits color from the alert variant.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"span"> | - | Standard span element props |
AlertTitle
Bold title text rendered as an h5 element.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"h5"> | - | Standard h5 element props |
AlertDescription
Body text for the alert message.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"div"> | - | Standard div element props |
AlertAction
Action slot positioned at the end of the alert for buttons or links.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"div"> | - | Standard div element props |
AlertClose
Dismiss button for closing the alert. Handle state externally via onClick.
| Prop | Type | Default | Description |
|---|---|---|---|
| onClick | () => void | - | Callback when the close button is clicked |
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"button"> | - | Standard button element props |