Components · Messages
Toast
A short message that appears, waits, and leaves.
Try itChange the motion setting at the top to feel each personality.
Use it
<Toast open={saved} onClose={() => setSaved(false)}>
Progress saved
</Toast>How it moves
| When | Role | What moves |
|---|---|---|
| Appears | enter | Fades in and rises by the enter distance, growing from the enter scale, from the bottom edge |
| Waits | none | Stays still for the dwell time: brief or read |
| Leaves | exit | Fades out and drops by the exit distance |
Rules:
- How long it waits is a dwell time, not a motion role. It is the same in every personality, because reading speed does not change with the brand.
- Use the brief dwell for a few words and the read dwell for a sentence. If the message needs an action from the person, it should not be a toast.
- One toast at a time. A new one replaces the old one.
- A toast does not shake, pulse, or bounce to be noticed.
Reduced motion: the enter and exit distances are 0, so the toast fades in and out where it stands. The dwell time does not change.
Screen readers: the toast is a status region, so its text is read out without moving focus.
CSS variables used: --ss-motion-enter-distance, --ss-motion-enter-spring, --ss-motion-enter-spring-duration, --ss-motion-exit-distance, --ss-motion-exit-duration, --ss-motion-exit-easing. Dwell times: --ss-motion-dwell-brief, --ss-motion-dwell-read.