Toast

A short message that confirms an action and goes away.

In Brand expressive

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

In Brand expressive: Confirms a place on the waitlist.

• 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 Brand expressive decided and why. Each sample is the live story with that variant set.

neutraltoneUsed in Brand expressive

Start Storybook to see it live

What it is for

A plain confirmation.

✓Something changed: cleared, copied, moved.

✕Something failed.

In Brand expressive

A light note that something changed.

Because

How many tones does it use?One per moment · voice.count

successtoneUsed in Brand expressive

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 Brand expressive

Celebrate, briefly: You're on the list. See you at launch.

Because

How does it sound?Playful · voice.valuesWhich outcome matters most?Engagement · outcomes.q1

dangertoneUsed in Brand expressive

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 Brand expressive

Plain first, a light touch after: That didn't go through.

Because

How many tones does it use?One per moment · voice.count

How Brand expressive uses it

The words of an error

Use Plain first, a light touch after

Not A joke before the fix

Playful copy must never hide what went wrong. Example: “That email doesn't look right. Check it and try again.”

A success message

Use Celebrate, briefly

Not A long thank-you

A short celebration is remembered. Example: “You're on the list. See you at launch.”

Why it works this way

Toast looks the way it does because of 3 answers about this product. Each card is one answer, in three steps: the answer, what it decided for Toast, and what would move if it changed.

How many tones does it use?voice.count

1The answer

One per moment

Playful in headlines, plain in errors.

2So Toast

• ✓uses neutral: A light note that something changed.
• ✓uses danger: Plain first, a light touch after: That didn't go through.

It also shapes Badge: danger Alert: default Alert: destructive

3If it changed

2

Toast decisions would reopen

No other answer follows from it.

How does it sound?voice.values

1The answer

Playful

Big words, few of them.

2So Toast

• ✓uses success: Celebrate, briefly: You're on the list. See you at launch.

3If it changed

1

Toast decision would reopen

No other answer follows from it.

Which outcome matters most?outcomes.q1

1The answer

Engagement

Engagement and sign-ups.

2So Toast

• ✓uses success: Celebrate, briefly: You're on the list. See you at launch.

It also shapes Button: primary Button: large Badge: warning Toggle: lg

3If it changed

1

Toast decision would reopen

and 6 answers that follow from it: A few minutes, Brand moments, Hero and launch moments, and 3 more.

Words

• Headlines are short and bold. Three to six words.
• Verbs that move: Join, Try, Go.
• Playful in headlines, plain in errors.
• Use: Join, Drop, Go, Love. Avoid: Synergy, Leverage, Kindly.

The labels components use, from the voice tokens:

• content.action.commit: Go
• content.action.cancel: Not now
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Explore the drop

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

Brand expressive 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)	Lighttaupe.light.0:#FFFFFFDarktaupe.dark.100:#33241F
Overlay radius	component.overlay.radiusradius.containervar(--overlay-radius)	radius.24:1.5rem
Overlay shadow Changes with theme	component.overlay.shadowelevation.overlayvar(--overlay-shadow)	Lightshadow.overlay:0px 24px 48px 0px #1F141133Darkshadow.overlay-dark:0px 24px 48px 0px #00000099
Toast
Gap	component.toast.gapspace.gap.defaultvar(--toast-gap)	space.16:1rem
Padding	component.toast.paddingspace.inset.containervar(--toast-padding)	space.32:2rem
Text Changes with theme	component.toast.labelcolor.text.primaryvar(--toast-label)	Lighttaupe.light.900:#1F1411Darktaupe.dark.900:#FFF8F3
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.8:0.5rem
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.17:1.0625rem
Label 2 Changes with theme	component.toast.label-2color.text.secondaryvar(--toast-label-2)	Lighttaupe.light.700:#4D3A33Darktaupe.dark.500:#E2C4B3
Font size 2	component.toast.font-size-2type.caption.font-sizevar(--toast-font-size-2)	font.size.14:0.875rem
Neutral
Border Changes with theme	component.toast.neutral.bordercolor.border.defaultvar(--toast-neutral-border)	Lighttaupe.light.200:#F2DCCFDarktaupe.dark.100:#33241F
Success
Border Changes with theme	component.toast.success.bordercolor.border.defaultvar(--toast-success-border)	Lighttaupe.light.200:#F2DCCFDarktaupe.dark.100:#33241F
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)	Lighttaupe.light.200:#F2DCCFDarktaupe.dark.100:#33241F
Border 2 Changes with theme	component.toast.danger.border-2color.status.dangervar(--toast-danger-border-2)	Lightred.light.600:#C42B2BDarkred.dark.600:#F28B8B