Alert
Thin accessibility wrapper with role="alert", variant colours, and custom colour support. Layout is composed freely via children.
Example
This is an informational message.
Success
Your changes have been saved.
Please review before continuing.
Something went wrong.
Alert with custom colors via surface props.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'danger' | — | No | Alert style variant |
surface | string | — | No | Custom background colour (sets variant to custom) |
onSurface | string | — | No | Custom text colour (sets variant to custom) |
border | string | — | No | Custom border colour (sets variant to custom) |
Accessibility
- role="alert" for screen reader announcement
Related Tokens
--alert-info--alert-success--alert-warning--alert-danger