Toast

ToastProvider and useToast confirm something that just happened: a slab pill at the bottom centre with a glyph disc, a title, an optional line and one action. One shows at a time and three wait their turn; each lives 5.2 s, and the time holds while the region is hovered or focused or the window is in the background. A toast never holds an error's only copy and never asks for a decision.

Example#

Usage#

Use a toast to confirm something that just happened and needs no answer: "Draft archived", "Link copied". It prints on a slab pill at the bottom centre, above the action dock on phones.

• One at a time. One shows, three wait; each lives 5.2 s, and the time holds while the region is hovered or focused or the window is in the background.
• One action at most, such as "Undo", as a small secondary key.
• Never an error's only copy, and never a question: errors live next to what caused them, decisions in a Dialog.
• Set up once. ToastProvider wraps the app; useToast() returns toast({ title, description, action, glyph }).

Anatomy#

Volume#

Reading layer: identical at every volume.

• Quiet

  Draft archived

  Undo

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  Draft archived

  Undo

  The site default. Art on its own plates, one display moment per view.

• Press

  Draft archived

  Undo

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Draft archived

  Undo

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• Past tense, the thing first: "Draft archived", "Link copied".
• Two to four words; a second line only when it adds something, such as where the thing went.
• The action is one verb: "Undo", "View".

Do and don't#

Accessibility#

• A polite live region; F6 moves focus to the region and the timers hold while it has focus.
• The drain bar along the foot reads time, so it still runs under reduced motion; the rise and drop become a fade.
• It sits above the phone dock through --mk-dock-h.

The colour pairs it prints, with their contrast on both papers:

Props#

Tokens#

Changelog#