Alert
A prominent message component used to communicate important information to users, with support for multiple variants and actions.
Variants
Your changes have been saved successfully.
There was an error processing your request. Please try again.
This action will permanently delete your account and cannot be undone.
A new software update is available for download.
With Title
Success
Your payment has been processed. You will receive an email confirmation shortly.
Error
Unable to connect to the server. Please check your internet connection and try again.
Warning
Your session will expire in 5 minutes. Please save your work.
Information
We have updated our privacy policy. Please review the changes.
Dismissible
Dismissible Alert
Click the X button to dismiss this alert.
With Action Buttons
Update Available
A new version of the application is available.
Unsaved Changes
You have unsaved changes that will be lost if you leave this page.
Connection Lost
Unable to reach the server. Your changes may not be saved.
Dismissible with Actions
Account Created
Your account has been created successfully. Would you like to complete your profile?
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'success' | 'error' | 'warning' | 'info' | 'info' | Visual style variant of the alert |
title | string | - | Optional alert title |
description* | string | - | Alert message content |
dismissible | boolean | false | Whether the alert can be dismissed |
onDismiss | () => void | - | Callback function when alert is dismissed |
actions | Array<{label: string, onClick: () => void}> | - | Action buttons to display in the alert |
Usage Guidelines
When to use
- •For important messages that require user attention or action
- •To communicate system status, errors, warnings, or confirmations
- •When providing contextual information within a workflow
- •For non-intrusive notifications that don't require immediate action
Best practices
- •Use appropriate variant: success for confirmations, error for critical issues, warning for caution, info for general updates
- •Keep messages concise and action-oriented
- •Provide clear next steps through action buttons when needed
- •Make alerts dismissible when they are informational and not critical
- •Avoid showing multiple alerts at once - prioritize and consolidate
Accessibility
- •Uses ARIA role="alert" for screen reader announcements
- •Icons provide visual reinforcement, not sole information source
- •Action buttons are keyboard accessible (Tab, Enter/Space)
- •Dismiss button includes aria-label for screen readers
- •Color is not the only indicator - icons and text convey meaning
Do's and Don'ts
✓ Do
- •Use clear, specific messages that explain what happened
- •Match variant to message severity (error for failures, success for confirmations)
- •Provide actionable next steps through buttons
- •Use dismissible alerts for non-critical information
Payment Processed
Your payment of $49.99 has been successfully processed.
✗ Don't
- •Don't use vague messages like "Something went wrong"
- •Don't mismatch variant and message (error variant with positive message)
- •Don't show critical errors as dismissible
- •Don't use alerts for promotional content or marketing
Oops!
Related Components
Toast
Temporary notification that appears and auto-dismisses
Banner
Page-level announcements and persistent messages
Badge
Small status indicators for inline use