Skip to contentSkip to navigation
DocsDocs

Toast

Brief feedback after an action, at the edge of the window.

StableSince 1.0.0
On this page

Overview

Show code, SaveChanges.tsx

Variants

Tones

Neutral

Routine feedback, such as Files archived. The default.

Success

An action that worked, such as Invitation sent.

Info

Something worth noticing that needs no action.

Danger

An action that failed.

Still picture, not live

Show code, Tones.tsx

Placements

Past a limit, older notifications wait behind a count, and danger notifications always show.

Bottom end

Most applications, at the bottom corner at the end of the line. The default.

Top center

An application whose bottom corner is taken.

Show code, TopCenter.tsx

Anatomy

  1. Notification

  2. Tone icon

  3. Message

  4. Action

  5. Dismiss button

Show code, ToastAnatomy.tsx

Behaviour

Duration

Its timer pauses while the pointer rests on it or it has focus.

Over a modal

While a modal, such as a Dialog or a Sheet, is open, notifications wait until it closes, so none covers its actions. Each then shows, and is announced, for its full duration.

Undo

A notification with an action stays until its action has run or people dismiss it.

Show code, UndoArchive.tsx

Retry

A danger notification stays until it is dismissed, and is announced at once.

Show code, RetryAfterError.tsx

Background work

A notification can stay until people dismiss it.

Show code, ExportReady.tsx

Rules

Keep what a notification offers reachable in the page too: it closes by itself.

Use it when

  • Feedback after an action, such as Changes saved
  • An undo right after an action that took effect at once
  • An action that failed and can be tried again
  • Work that finished in the background, such as an export
DoOne notification for an action on many items.
Show code, OneForMany.tsx
Don’tA notification for each item: they stack up and hide each other.
Show code, OnePerItem.tsx

Content

Label an action with a short verb, such as Undo or Try again, and give a notification one action at most.

Accessibility

KeyAction
F6Moves focus to the notifications, and pauses them.
Tab, Shift+TabMoves through the notifications and their buttons, then back to the page.
EscDismisses the focused notification.
Enter, SpaceRuns the action, or dismisses with the dismiss button.

Related

  • A message about the page or a section that stays while the situation lasts, such as a plan's limit.

  • A decision people make before anything happens, such as confirming a deletion.

  • A field's value that needs correcting.

  • How much of a long task is done, such as an upload.

  • Work that runs after a press, shown on the control that started it.