Geist Design System

Toast

A succinct message that is displayed temporarily.

Default

Multi-line

With jsx

With a link

Preserve

Action

Undo

Success

Warning

Error

Best Practices

When to use

  • Use a toast for non-blocking acknowledgments of user-initiated actions: Domain added, Project archived, Deployment canceled.
  • Don’t use a toast alone for billing failures, permission denials, or build failures the user has to triage. Pair a ≤6-word toast (Build failed) with a persistent row carrying the recovery step and a stable identifier.
  • Field-level validation belongs on the Input, not in a toast. Persistent configuration warnings belong in Note or Banner.
  • Pick the method by how the user experienced the event, not by HTTP status. A user-canceled deploy is toasts.message('Deployment canceled'), not success. A partial deploy with skipped routes is toasts.warning(...).

Behavior

  • Default toasts auto-dismiss; pass preserve only when the user must read or act on the message before it disappears.
  • Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single Undo action button.
  • Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step.

Content

  • One sentence, sentence case, no trailing period when the toast is a single sentence.
  • Completion toasts follow {Noun} {past-participle}: Blob deleted, Domain added, Environment variable saved. Never include successfully; the action name implies it.
  • Error toasts are two sentences with periods and end with a recovery step: Couldn’t verify domain. Try again. Use Couldn’t for user-state errors and Failed to for system or infra errors; match adjacent shipped copy and don’t flip mid-flow.
  • Pair the toast verb 1:1 with the destructive button verb (Delete Project then Project deleted, never Project removed).
  • Undo snackbars use the literal label Undo, never Restore, Bring Back, or Cancel. Only use the pattern when the rollback is safe.

Accessibility

  • The toast region announces with aria-live="polite"; reserve assertive for blocking errors that interrupt a flow.
  • Don’t put primary navigation inside a toast; transient surfaces vanish before keyboard users can reach them.