Alert
Overview
- type
- success · warning · error · info · default
- variant
- toast · inline
- Toggles
- open, showCloseButton
All options
Type and message
Five alert types for different contexts: success, warning, error, info, and default. Add a secondMessage below the primary message for additional context. Shown with the inline variant; the toast variant is shown under Examples.
| type \ content | message | secondMessage |
|---|---|---|
| success | ||
| warning | ||
| error | ||
| info | ||
| default |
Examples
Toast
The default toast variant pops in with a slight overshoot and leaves quickly. It dismisses itself after a few seconds, and the timer pauses while the toast is hovered or focused.
Without close button
Alerts without a close button for persistent informational messages.
Accessibility
Announcements
Error alerts use role="alert" so screen readers announce them immediately; all other types use role="status" and are announced politely.
Dismissing
The close button is labelled "Dismiss". Without a close button the alert dismisses itself after 5 seconds, and the timer pauses while the alert is hovered or focused.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| open | boolean | No | — |
| type | 'success' | 'warning' | 'error' | 'info' | 'default' | Yes | — |
| message | string | Yes | — |
| secondMessage | string | No | — |
| onClose | () => void | No | — |
| showCloseButton | boolean | No | — |
| variant | 'toast' | 'inline' | No | — |