Skip to content
Dark

Toast

Toast reports what just happened without blocking the screen, then takes itself away.

Preview

Transient feedback that does not block input and takes itself away. On Android this is a Snackbar, on iOS a custom overlay.

Type Line at State Neutral, then Type Long at State Success
320 wide, 36 and 112 tall, radius 24, dropShadow/sm
Title of toastAccept
Title of toastThis is a supporting text. It would look better as three lines of text.Accept

Both types are the same card. Line is one row with a title, an action and a dismiss. Long adds a description under the title and stacks the two controls on the right.

Types

Two shapes for two amounts of message. The type scale changes with them.

Type Line then Type Long, both at State Neutral
icon 16 and 20, title 12/16 and 14/20
Title of toastAccept
Title of toastThis is a supporting text. It would look better as three lines of text.Accept

The difference is not only height. Line sets the title at 12/16 next to a 16 icon; Long lifts it to 14/20 next to a 20 icon and lets the description run to three lines, taking the card to 112.

States

Five states, one icon. State moves the icon colour and nothing else.

Neutral, Error, Success, Warning and Info, at Type Line
the card stays bg/white-0 in all five
Title of toastAccept
Title of toastAccept
Title of toastAccept
Title of toastAccept
Title of toastAccept

All ten variants carry the same icon, a speech bubble, so an error here looks like a message rather than a warning. Swapping it is on you. The surface never changes either: no tint, no coloured border, just the icon. Info holds #155DFC in both themes while the button beside it moves to #2B7FFF, so two blues that match in light come apart in dark.

Properties

Two axes, ten variants, and five knobs on top of them.

Property
Type
Default
Type
Long | Line
Line
State
Neutral | Error | Success | Warning | Info
Neutral
Icon, Link Button, Dismiss Icon
Boolean
all True
Icon Swap
Instance swap, 1,667 preferred icons
message-circle
Title Edit, Description
Text
Title of toast
Part
What it is
Size
Button
A Button instance, Brand Link sm
85 x 36
Compact Button
Transparent, holding a 20 x at stroke 2.5
32 x 32

Description is a property on both types even though only Long draws it, so setting it on a Line toast changes nothing. The action is a real Button instance, not a text node, so its label is an override two levels down. There is no position, stacking or duration: where it sits, how long it stays and what a second arrival does are all yours.

Tokens

Four for the card and five for the icon. Two of the five do not theme.

Token
Light
Dark
Applied to
bg/white-0
#FFFFFF
#0E0E0F
The card, all ten variants
border/soft-100
#E9E9EA
#2F2F31
1px inside border
text/strong-950
#0E0E0F
#FFFFFF
Title
text/sub-700
#48484A
#C7C7CC
Description, Long only
brand/base
#155DFC
#2B7FFF
Action label
fg/soft-500
#8E8E93
#AEAEB2
Dismiss x
state/faded/base-500
#8E8E93
#8E8E93
Neutral icon, one value in both modes
state/error/base-500
#FB2C36
#E7000B
Error
state/success/base-500
#22C55E
#16A34A
Success
state/warning/base-500
#FF6900
#F54900
Warning
state/information/base-500
#155DFC
#155DFC
Info, one value in both modes

Error, warning and success step from their 500 to their 600 in dark, which keeps them off a near black card. Faded and information do not move, so on the dark card information is the weakest colour here, sitting next to a button that moved the other way.

Guidelines

Do
Photo savedUndo

Keep the action optional. Undo, View, Retry: things the user can ignore and lose nothing by, because the toast is going to leave on its own.

Don't
Delete this album?Confirm

Never put a required action in a toast. It dismisses itself, so a Confirm that lives only here is a decision the user can miss by looking away.

Use it for feedback about something that already happened, not for a question. Keep the title to one line, and reach for Long only when the extra sentence changes what the user would do. Swap the icon to match the state; the file ships all ten with a speech bubble. Put a required decision in a Modal or an Alert, never here.