Alert
An inline status message: 5 colors, each with a matching default icon.
New version available
Sakani 0.3 adds the Billing block group and dark-mode fixes.
Colors
Info
Something worth knowing.
Success
Your changes were saved.
Warning
Double-check before continuing.
Danger
This action can't be undone.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'info' | Color scheme and default icon. |
| title | string | Alert heading. | |
| description | string | Supporting text. | |
| icon | ReactNode | Overrides the default status icon. |
Why it works this way
Why
- It is an inline status message that belongs to the page or a section and stays until resolved, with a matching default icon per colour.
- It is announced to assistive tech as a live region, so important changes aren't silent.
Don't
- Don't use it for a transient confirmation. Use Toast.
- Don't use danger for something the user did not get wrong, such as a declined request. Use neutral, and say what can be done instead.