Toast | Lime design system

Examples

A move with Undo

Vacation fund: $290

A plain confirmation

When to use it

Use: A quick action finished and the screen does not show the change, such as moving money from a list.
Use: An action that can be reversed for a moment, with Undo.
Not for: A payment the person made themselves, where the amount and Undo need room. Use Payment done.
Not for: Something failed to load and needs a retry. Use Error state.
Not for: What the assistant did on its own. Use Action receipt.
Not for: A form error. Show it on the field, where it can be fixed.

8 rules

Must: Mount one ToastProvider inside the Lime scope and call useToast().show() under it. Because each provider keeps its own one-at-a-time queue, so two stack toasts on top of each other.
Must: Write the title as what happened, past tense, with the amount or the name. Because Success! never says what moved, and the toast is gone in 5 seconds.
Must: Give a toast at most one action, and make it Undo or a way back to the thing. Because there is one action slot and 8 seconds to reach it.
Must: Show the result on the screen too; never make a toast the only record. Because it closes itself, so a person who looked away never learns the transfer went through.
Never: Use a toast for an error the person must act on. Because it closes in 5 seconds and the polite region reads it late, so the decline goes unseen.
Should: Keep the timeout; set 0 only in a preview, since a toast that never leaves covers the page.
Should: After Undo, show a second toast that says it was undone.
Should: Keep it to the title; add description only when the title cannot carry it.

5 checks

: The viewport is a polite live region named Notifications; a toast is read after the current speech.
: Hover, focus or a touch on the toast pauses its timer, so Undo can always be reached.
: F6 moves focus to the toast from anywhere; Escape closes it.
: The close button is named Dismiss; the action is a real button with its own label.
: White on ink is 17.6:1, and the focus ring inside the toast is white on ink in both themes.

6 edge cases

Two in a row: The new toast replaces the one showing; there is never a stack.
Long title: Wraps to a second line; the toast grows upward and the buttons stay centred.
Phone: 16px from the sides and bottom, full width up to 384px.
Swipe down: Closes it, like Dismiss.
Reduced motion: It appears and leaves without moving or fading.
Inside a dialog: Sits above the dialog and its scrim (--z-toast).

6 props

ToastProvider.timeout: number default 5000
ToastProvider.contained: boolean default false
ToastProvider.toastManager: createToastManager()
useToast().show: ({title, description?, action?, timeout?, id?}) => string
show action: {label, onClick}
useToast().close: (id?) => void

13 tokens

--ink: #0f0f0d
--ink-hover: #2a2a26
--ink-active: #3f3f3a
--fg-inverse: #ffffff
--radius-panel: 16px
--shadow-overlay: 0 24px 48px -12px rgb(var(--shadow-ink) / 0.24), 0 4px 12px rgb(var(--shadow-ink) / 0.08)
--control-sm: 32px
--control-lg: 48px
--z-toast: 60
--dur-base: 200ms
--dur-fast: 140ms
--ease-out: cubic-bezier(0.16, 1, 0.3, 1)
--ease-in: cubic-bezier(0.4, 0, 1, 1)