Alert
A message about the page, not about a field.
Why it exists
Seven near-identical copies of this box existed across Ivy, Root and Sage — five red, two amber — each hand-rolled with its own border opacity and text shade. This is that box, once.
That account isn't an Averoa employee
Tones
The icon is not decoration — it is the second signal alongside colour, so a warning still reads differently from a failure for someone who cannot distinguish amber from red.
No providers configured
Could not reach Sage
In both themes
light
dark
Guidance
Use it when
- State that affects the whole page — a failed load, a missing configuration.
- A title when there is a body, so the shape of the problem reads before the detail.
Reach for something else when
- A field error. That is Field's `error`, which is wired to the input with aria-describedby.
- The result of a button press — that is FormMessage, next to the button.
- Decoration. An alert that is always on screen stops being read within a day.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "info" | "success" | "warning" | "danger" | "info" | Severity. Sets the colour and the icon. |
| title | string | — | Bolded first line. |
| hideIcon | boolean | false | Rare — the icon is the non-colour signal. |
Accessibility
danger renders role="alert", which interrupts a screen reader; every other tone renders role="status", which waits for a pause. Only a failure earns the interruption — making everything an alert trains people to ignore alerts.