Show a message that stays in the page, with an optional title, icon and close button.
The basic Alert usage. Errors and warnings are announced right away by a screen reader, the other types wait for a pause.
Use filled, light or subtle to change how much the color takes over.
onClose shows a close button. Hide the alert in your state, and bring it back when the cause returns.
Put an icon before the text, and any element, such as a button, after it.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| type | color of the alert | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | - | default |
| title | bold first line | ReactNode | - | - |
| icon | element before the text | ReactNode | - | - |
| filled | solid color | boolean | - | false |
| light | tinted background | boolean | - | false |
| subtle | text only, no border | boolean | - | false |
| onClose | shows a close button and calls it on click | () => void | - | - |
| closeLabel | accessible name of the close button | string | - | Close |
| role | defaults to alert for errors and warnings, status otherwise | string | - | - |
| ... | native props | HTMLAttributes | - | - |