Alert
Explore interactive examples and all component variations in our Storybook.
The Alert component displays important messages to users with different visual styles based on the message type. It supports various variants, optional titles, close buttons, and action buttons for enhanced user interaction.
Basic Usage
This is an informational alert. It provides helpful context or additional information.
Alert Variants
This is an informational alert. It provides helpful context.
This is a warning alert. It indicates something that needs attention.
This is an error alert. It indicates something went wrong.
This is a success alert. It confirms that an action was completed successfully.
Alerts with Titles
Information
Your account settings have been updated. Changes will take effect immediately.
Storage Almost Full
You're using 95% of your storage space. Consider upgrading your plan or deleting unused files.
Payment Failed
Your payment could not be processed. Please check your payment method and try again.
Profile Updated
Your profile information has been successfully updated and saved.
Dismissible Alerts
New Feature Available
Check out our new dashboard analytics feature in the sidebar.
Maintenance Scheduled
System maintenance is scheduled for tonight from 2-4 AM EST.
Alerts with Action Buttons
Update Available
A new version of the application is available with bug fixes and improvements.
Subscription Expiring
Your subscription expires in 3 days. Renew now to avoid service interruption.
Properties
Alert
| Property | Type | Description |
|---|---|---|
variant | "info" | "warning" | "error" | "success" | The visual style variant of the alert. Default: "info". |
title | string | Optional title text displayed above the main content. |
children | React.ReactNode | The main content of the alert. |
showCloseButton | boolean | Whether to show a close button. Default: false. |
onClose | () => void | Callback function called when the alert is closed. |
actionButton | ActionButtonConfig | Configuration for an optional action button. |
className | string | Additional CSS classes for custom styling. |
ActionButtonConfig
| Property | Type | Description |
|---|---|---|
label | string | The text displayed on the action button. |
onClick | () => void | Callback function called when the button is clicked. |
variant | "default" | "outline" | "secondary" | The visual style of the button. Default: "default". |
Variant Styles
| Variant | Background | Border | Text | Icon |
|---|---|---|---|---|
info | Blue 50 | Blue 200 | Blue 800 | Info |
warning | Yellow 50 | Yellow 200 | Yellow 800 | Alert Triangle |
error | Red 50 | Red 200 | Red 800 | Alert Circle |
success | Green 50 | Green 200 | Green 800 | Check Circle |
Accessibility
The Alert component includes several accessibility features:
- Uses the
role="alert"attribute for screen reader compatibility - Icons have
aria-hidden="true"to prevent redundant announcements - Close button includes
aria-label="Close alert"for screen readers - Proper color contrast ratios for all variants
- Keyboard navigation support for interactive elements
Common Use Cases
The Alert component is perfect for:
- System notifications - Updates, maintenance, new features
- Form validation - Error messages, success confirmations
- User feedback - Action confirmations, warnings
- Status updates - Progress indicators, completion messages
- Security alerts - Login attempts, account changes
- Marketing messages - Promotions, announcements
Best Practices
- Use appropriate variants - Match the alert type to the message importance
- Keep messages concise - Users should quickly understand the message
- Provide clear actions - Include relevant action buttons when needed
- Consider timing - Auto-dismiss non-critical alerts after a reasonable time
- Test accessibility - Ensure screen readers can access all content
- Avoid alert fatigue - Don't overwhelm users with too many alerts