Components
Alert
Display important messages, notifications, or feedback to users with contextual styling and optional actions.
Success
Your changes have been saved successfully.
A new software update is available. See what's new.
Warning
Your subscription will expire in 3 days. Please renew to continue.
Error
There was a problem processing your request. Please try again.
Installation
Usage
import Alert from "@/components/alert";
export default () => (
<Alert
variant="success"
title="Success"
message="Your changes have been saved successfully."
withIcon
/>
);Examples
With Actions
<Alert
variant="danger"
title="Delete Account"
message="This action cannot be undone. This will permanently delete your account."
actions={{
primary: {
label: "Delete",
onClick: () => console.log("Deleted")
},
secondary: {
label: "Cancel"
}
}}
/>Without Title
<Alert
variant="info"
message="A new software update is available. See what's new."
withIcon
/>API Reference
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'success', 'danger', 'info', 'warning', 'gray' | 'success' | Visual style and color scheme |
title | string | - | Optional heading for the alert |
message | string | - | Main alert message (required) |
withIcon | boolean | false | Show icon indicator |
open | boolean | true | Control visibility state |
onClose | () => void | - | Callback fired when alert is closed |
actions | object | - | Action buttons configuration |
actions.primary | { label: string; onClick: () => void } | - | Primary action button |
actions.secondary | { label: string } | - | Secondary action button (triggers onClose) |
Variants
The component includes five semantic variants, each with their own color scheme:
- success: For successful operations or positive feedback
- danger: For errors or destructive actions
- info: For informational messages
- warning: For warnings or important notices
- gray: For neutral or general messages
Accessibility
- Close button includes
aria-labelfor screen readers - Automatically refocuses after closing (reappears after 5 seconds)
- Semantic color coding for different message types