On this page
Overview
Show code, SaveConfirmation.tsx
Variants
A condition of the page
An Alert that is there when the page loads describes it and offers the one thing people can do.
Show code, SectionAlert.tsx
Background work
When the export ends, a toast with Download reaches people wherever they are, and the page keeps a link to the file too.
Show code, BackgroundTask.tsx
Status in rows
One tone per status, everywhere.
Show code, StatusInRows.tsx
Behaviour
Volume
Each message is announced at most once, and only what calls for action interrupts. The outcome of an action people started is a toast.
Rules
Put each message where it belongs, at the volume it deserves.
Use it when
- The outcome of an action, or of work in the background
- A state people should notice, on a page, a row or a destination
Built from
Alert, Badge, List, DescriptionList, RelativeTime, Button, Link, Select, TextField
Which to use
Each kind of message has its place.
- A field's error
A value in a field that is wrong, as forms show it.
- An Alert on the page
A condition of the page, read with the page.
- An announced Alert
Something that just happened and must interrupt.
- A toast
The outcome of an action people started, announced politely.
- A danger toast
An action that failed where the page can't show it, with Try again.
- A confirmation
A decision people must make, in a ConfirmDialog.
- A badge
The state of a row, read with the row, in a Badge.
One message per event
Put a message as close as it can be to what it is about, and say it once.
- A toast or a status text, not both.
- A field's error without a toast too.
Content
Each message says what happened, or what to do, in a few words.
- A toast names what happened to what, in the past tense, "Website refresh archived." or "Invitation sent to jordan.kim@example.com.", or the state a setting leaves, with one action at most.
- An Alert's title is the condition, and its one sentence says what to do.
- A failure says what happened, whether work is safe and what to do, "Couldn't load projects. Try again.", never an error code alone.
- A status is a word or two, such as "On track", "At risk", "Blocked" or "Done", the same everywhere, with no prefix such as Success or Error: the tone says it.
Accessibility
Focus and keyboard
Feedback doesn't move focus, with two exceptions.
- To the Alert after a refused form or a failed save.
- To what replaces a control people used.