Alert
A component for displaying important information to users with optional dismissible functionality.
Code
<Alert type="info">
This is an informational alert.
</Alert>
<Alert type="success">
Operation completed successfully!
</Alert>
<Alert type="warning">
Be cautious with this action.
</Alert>
<Alert type="error">
An error occurred. Please try again.
</Alert>
<Alert type="info" dismissible={true} id="custom-alert">
This alert can be dismissed by clicking the X button.
</Alert>Props
| Name | Type | Required | Description |
|---|---|---|---|
type |
"info" | "success" | "warning" | "error" | No |
The type of alert that determines its visual appearance and emoji
Default: "info"
|
dismissible |
boolean | No |
Whether the alert can be dismissed by the user
Default: false
|
id |
string | No | Unique identifier for the alert. If not provided, a random ID will be generated |
Usage
✅ Do’s
- Use dismissible alerts for messages that are intended to disrupt the user’s flow
- Use for important status messages and notifications
- Place alerts at the top of the content area
- Keep messages clear and concise
❌ Don’t’s
- Don’t stack too many alerts at once
- Don’t include complex interactive elements
- Don’t use for general content or decorative purposes
Accessibility
Keyboard Navigation
- Tab focuses on dismiss button for dismissible alerts
- Enter/Space activates the dismiss button when focused
- The first dismissible alert's dismiss button is autofocused when present
Screen Reader Support
- When it displays, the alert is announced to screen readers
- Uses
role="alert"to announce content