Alert
A persistent message in the flow of the page — a validation summary, an explanation of why something is unavailable. Stays until the condition changes, unlike a Toast.
import Alert from '@/components/ui/Alert';Source: src/components/ui/Alert.tsx
Examples
Variants
The colour split here is the system’s most-explained decision. The brand hue keeps the border and the filled circle; the TEXT drops to that hue’s -900 step; the glyph inside the circle is navy-700, not white. Because green-600 is 1.81:1 on white, red-600 is 3.18:1 and yellow-500 is 1.69:1 — all under the 4.5:1 AA wants for body text, and white-on-fill is under even the 3:1 non-text minimum on three of the four.
Withdrawal requested
You’ll get an email when it’s paid.
That password isn’t right
Cashback can take 48 hours to appear
Tracking is confirmed by the store, not by us.
Title only
The body is optional, and a one-line alert should use just the title rather than an empty-ish body. Form’s inline `formError` renders exactly this.
Wrong email or password.
Saved.
Props
<Alert> props
| Prop | Type | Default | Description |
|---|---|---|---|
variantrequired | 'success' | 'error' | 'warning' | — | — |
titlerequired | string | — | — |
children | ReactNode | — | Optional body under the bold title — omit for one-line notifications. |
Accessibility
- The contrast split is pinned by tests/unit/alertContrast.test.ts, which parses the variant maps — so a new variant is covered as soon as it is added.
- An alert that appears in response to an action should be in a live region, or a screen-reader user never learns it arrived.
Usage
Do
- Use it for something the user has to act on or understand before continuing.
- Put the whole message in `title` when it fits on one line.
Don’t
- Don’t darken a whole variant to fix its text contrast. That was the first attempt and it turned the warning brown — darkening yellow shifts its apparent hue in a way darkening red and green doesn’t.
- Don’t use it for a transient confirmation; that is a Toast.