Status and feedback

Toast

components/ui/toast

Short confirmations that clear themselves.

Craft notes

Clears itself after three seconds; hovering or focusing holds it on screen
Each tone has its own sound, and dismiss plays as it leaves
Lives in a polite live region, so screen readers announce it without interrupting

Play it

Fire all four tones, then hover one to hold it on screen.

Sounds: save, warning, error, notify, dismiss

Variants

Every prop combination the component supports. The chip on each card is the exact props it passes.

Success
tone="success"
Plays save, quieter and shorter than success.
Warning
tone="warning"
Two falling bells.
Error
tone="error"
Two clashing low tones that fall.
Information
tone="info"
A two-note glass chime.
With action
action={{ label: "Undo", onClick }}
Stays a second longer and offers Undo.