Components / Overlays / ToastOpen in Figma

Toast

Partial

A short message that tells people an action failed or worked.

Platforms Phone · TabletGroup OverlaysUpdated 26 Oct 2026

When to use

  • An action failed and people need to know, such as a save that did not go through.
  • An action worked but the screen does not show it on its own.

When not to use

If people need toUse
Ask people to confirm before actingConfirm
Show an error on one fieldText field error message
Show the status of a recordStatus label

Anatomy

Titleclose
Body text that says what to do next.
  1. Container · required: Red for error, Navy pill for success
  2. Title · required
  3. Close · required
  4. Body · optional

Variants

VariantPurposeFigma
ErrorSomething failedDesigned
SuccessSomething worked: Navy pill at the bottom with a tick, one line and Undo when the action can be taken backDesigned

States

StateWhenWhat changesFigma
Title and bodyPeople need to know what to do nextBody line under the titleDesigned
Title onlyThe title says it allNo bodyTemporary rule

Behaviour

  • Appears at the bottom of the screen, 16 from the edges, above any action bar or bottom nav (temporary rule: position not set in Figma).
  • Error toasts stay until closed; success toasts close themselves after 4 seconds (temporary rule).
  • One toast at a time; a new one replaces the old.
  • Failures use a toast, never a banner that stays on the screen.

Phone and tablet

PhoneTablet
WidthFull width less 16 each sideContent width, centred, up to 480 (temporary rule)

Content

PartRule
TitleWhat happened, in a few words: "Couldn't save"
BodyWhat to do next, one line
TonePlain and calm; no blame, no exclamation marks

Do and don't

Couldn't saveCheck the connection and try again.
DoSay what happened and what to do next.
Error 500!Something went wrong.
Don'tShow a code or a vague message.
ConfirmBottom sheetStatusColour
← Filter screenList layout →