Toast

A short message that confirms an action and goes away.

Left out of Accessible first A toast goes away. Here errors and important notes stay on the page, because people must know what went wrong and where. Use instead: Alert

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Toast in StorybookSee it in dark

When to use it

• Use it when: Saved, sent, exported: something people should notice without stopping.
• Not when: A failure people must understand (alert or dialog), or a notice that stays (alert).

Instead:

• Alert: Stays on the page.
• Dialog: Needs an answer.

Variants

What each variant is for in any design system, then what Accessible first decided and why. Each sample is the live story with that variant set.

neutraltoneNot decided yet

Start Storybook to see it live

What it is for

A plain confirmation.

✓Something changed: cleared, copied, moved.

✕Something failed.

In Accessible first

Not decided yet.

successtoneNot decided yet

Start Storybook to see it live

What it is for

Confirms that something people care about worked.

✓Exported, paid, joined.

✕A routine change that needs no celebration.

In Accessible first

Not decided yet.

dangertoneNot decided yet

Start Storybook to see it live

What it is for

Something failed in the background.

✓What failed and how to fix it, when it can wait for people's attention.

✕A failure that blocks the task: use an alert or a dialog.

In Accessible first

Not decided yet.

How Accessible first uses it

The words of an error

Use Say what is wrong, where, and exactly how to fix it

Not "Invalid input"

People must be able to fix the error without help. Example: “Enter your date of birth. For example, 27 3 1980.”

A success message

Use Confirm what happened and what comes next

Not A confirmation with no next step

People need to know the task is finished and what happens now. Example: “We have your application. We will email you within 5 working days.”

Words

• Use common words. Explain any term you must use.
• One idea per sentence. Put the action first.
• Never blame the person.
• Use: Continue, Change, Start, You. Avoid: Invalid, Utilise, Submit, Error code.

The labels components use, from the voice tokens:

• content.action.commit: Continue
• content.action.cancel: Go back
• content.action.destroy: Delete
• content.action.retry: Try again
• content.action.empty-action: Start a new application

See Voice and tone for the whole voice.

Accessibility and keyboard

Test before you ship:

• It is announced politely without taking focus, and stays long enough to read. undefined
• Nothing people must act on lives only in a toast. undefined

Use it in code

npx open-ds add toast

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Toast reads 17 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Toast's tokens to change Toast alone.

Changes with theme

Accessible first decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Shared
Overlay background Changes with theme	component.overlay.backgroundcolor.surface.raisedvar(--overlay-background)	Lightgray.light.0:#FFFFFFDarkgray.dark.100:#222222
Overlay radius	component.overlay.radiusradius.containervar(--overlay-radius)	radius.8:0.5rem
Overlay shadow	component.overlay.shadowelevation.overlayvar(--overlay-shadow)	shadow.none:0px 0px 0px 0px #00000000
Toast
Gap	component.toast.gapspace.gap.defaultvar(--toast-gap)	space.16:1rem
Padding	component.toast.paddingspace.inset.containervar(--toast-padding)	space.24:1.5rem
Text Changes with theme	component.toast.labelcolor.text.primaryvar(--toast-label)	Lightgray.light.900:#141414Darkgray.dark.900:#F7F7F7
Border width	component.toast.border-widthborder-width.defaultvar(--toast-border-width)	border-width.2:2px
Gap 2	component.toast.gap-2space.gap.tightvar(--toast-gap-2)	space.12:0.75rem
Weight	component.toast.font-weighttype.label.font-weightvar(--toast-font-weight)	font.weight.700:700
Text size	component.toast.font-sizetype.body.font-sizevar(--toast-font-size)	font.size.19:1.1875rem
Label 2 Changes with theme	component.toast.label-2color.text.secondaryvar(--toast-label-2)	Lightgray.light.700:#333333Darkgray.dark.600:#B4B4B4
Font size 2	component.toast.font-size-2type.caption.font-sizevar(--toast-font-size-2)	font.size.16:1rem
Neutral
Border Changes with theme	component.toast.neutral.bordercolor.border.defaultvar(--toast-neutral-border)	Lightgray.light.200:#D6D6D6Darkgray.dark.100:#222222
Success
Border Changes with theme	component.toast.success.bordercolor.border.defaultvar(--toast-success-border)	Lightgray.light.200:#D6D6D6Darkgray.dark.100:#222222
Border 2 Changes with theme	component.toast.success.border-2color.status.successvar(--toast-success-border-2)	Lightgreen.light.600:#1F7A3ADarkgreen.dark.600:#5CC283
Danger
Border Changes with theme	component.toast.danger.bordercolor.border.defaultvar(--toast-danger-border)	Lightgray.light.200:#D6D6D6Darkgray.dark.100:#222222
Border 2 Changes with theme	component.toast.danger.border-2color.status.dangervar(--toast-danger-border-2)	Lightred.light.600:#C42B2BDarkred.dark.600:#F28B8B