DocsComponents
Toast & alert
Four tones; the channel follows the source of the message.
Changes saved.
Your child’s profile has been updated.
Removed from favourites.
Skateboarding for beginners
Removed from favourites.
Skateboarding for beginners
- 1Tone icon 20 px: check for success, circle-alert for the others
- 2Title 500 and description, 14 / 20 px
- 3Optional action: text button 600, 44 px high
- 4Close: 44 px round target, corner toast only
- 5Container: radius 12 px, 2 px border in the tone, toast shadow
Variants
Four tones built the same way: background 50, border 200 or 300, icon 500 or 600, text 800 of one colour. The channel follows the source of the message: an event that is not tied to a field goes to a corner toast; a state of the screen stays in the content as an inline toast or alert.
Toast (corner notification)
Changes saved.
Your child’s profile has been updated.
New terms of service.
See what changed on 1 October.
Session ends in 2 minutes.
Save your changes so you don’t lose them.
Google sign-in failed.
Try again or use your email address.
Inline toast (in the content)
We’ll show the address to parents after publishing.
Until then they only see the district.
We couldn’t load the activities.
Check your connection and try again.
Inline alert
Incorrect email or password.
Check both and try again.
You can change the group size later in settings.
States
The message itself has no states; its controls do. The action gets a tint of the text colour on hover, close gets a light ink background. Both show the focus ring. Hover and focus are forced below.
Customer added.
We sent them an invitation.
Customer added.
We sent them an invitation.
Customer added.
We sent them an invitation.
API reference
Toast is positioned by the app’s container; the component only draws the message.
Toast
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "success" | "warning" | "error" | "info" | Tone: background 50, border 200 / 300, icon 500 / 600, text 800. |
inline | boolean | false | In-page message: no close button, the action drops under the text below 768 px. |
title | text | – | First line, weight 500. |
description | text | – | Optional second line: what to do next. |
action | { label, onClick } | – | Optional text action in its own column, e.g. “Undo”. |
onClose + closeLabel | function + text | – | Show the 44 px close button (corner toast only); the label names it for screen readers. |
icon | icon | – | Replaces the default tone icon. |
InlineAlert
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "error" | "info" | "warning" | "success" | "error" | Error for errors; the rest for information that is not an error. Info is neutral slate. |
title | text | – | Optional bold first line. |
icon | icon | – | Icon from the app; its colour follows the tone. |
children | content | – | Message body; stays on screen, cannot be closed. |
Accessibility
- Error uses role alert, so a screen reader interrupts and reads it at once; success, info and warning use role status and wait for a pause.
- The close button has a text name (closeLabel) and a 44 × 44 px target; the action is 44 px high.
- Meaning is in the title and description, never in the colour or icon alone.
- Text contrast: success 6.8:1, info 15.7:1, warning 6.8:1, error 7.6:1; inline alert info 14:1.
- Icon contrast is lower: error 4.4:1, success 3.1:1, but warning amber-500 on amber-50 only 2.1:1. The icon is decorative (aria-hidden) and the text carries the message, so it passes; a darker amber icon would still be the better choice.
Do and don’t
We couldn’t load the activities.
The postcode is invalid.