Toast

A short message that confirms an action and goes away.

In Content first

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 Content first: Confirms a saved article.

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

neutraltoneUsed in Content first

Start Storybook to see it live

What it is for

A plain confirmation.

✓Something changed: cleared, copied, moved.

✕Something failed.

In Content first

A calm note: You're all caught up.

Because

How does it sound?Conversational · voice.values

successtoneUsed in Content first

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 Content first

Warm and brief, with what happens next.

Because

How does it sound?Conversational · voice.values

dangertoneUsed in Content first

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 Content first

Calm and helpful: take the blame, offer the way forward.

Because

How many tones does it use?One per moment · voice.countHow does it sound?Conversational · voice.values

How Content first uses it

The words of an error

Use Calm and helpful. Take the blame, offer the way forward.

Not Blaming the reader

A calm error keeps the reader's trust. Example: “We could not save your email. Check it and try again.”

A success message

Use Warm and brief, with what happens next

Not A bare "Done"

A warm close invites the reader back. Example: “You're in. The next issue arrives on Friday.”

Why it works this way

Toast looks the way it does because of 2 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 does it sound?voice.values

1The answer

Conversational

Talk to one reader, like a good editor.

2So Toast

• ✓uses neutral: A calm note: You're all caught up.
• ✓uses success: Warm and brief, with what happens next.
• ✓uses danger: Calm and helpful: take the blame, offer the way forward.

It also shapes Empty: icon

3If it changed

3

Toast decisions would reopen

No other answer follows from it.

How many tones does it use?voice.count

1The answer

One per moment

Warm by default, calmer for errors.

2So Toast

• ✓uses danger: Calm and helpful: take the blame, offer the way forward.

It also shapes Alert: destructive Badge: danger

3If it changed

1

Toast decision would reopen

No other answer follows from it.

Words

• Write to one person: "you", not "users".
• Short sentences with room to breathe.
• Explain why before asking for anything.
• Use: Read, Save for later, You, Next issue. Avoid: Click here, Submit, Users, Content.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Not now
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Browse guides

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

Content 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)	Lightstone.light.0:#FFFFFFDarkstone.dark.100:#2E2A24
Overlay radius	component.overlay.radiusradius.containervar(--overlay-radius)	radius.12:0.75rem
Overlay shadow Changes with theme	component.overlay.shadowelevation.overlayvar(--overlay-shadow)	Lightshadow.overlay:0px 12px 32px 0px #1F1B1629Darkshadow.overlay-dark:0px 12px 32px 0px #00000080
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)	Lightstone.light.900:#1F1B16Darkstone.dark.900:#FFFDF8
Border width	component.toast.border-widthborder-width.defaultvar(--toast-border-width)	border-width.1:1px
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.600:600
Text size	component.toast.font-sizetype.body.font-sizevar(--toast-font-size)	font.size.18:1.125rem
Label 2 Changes with theme	component.toast.label-2color.text.secondaryvar(--toast-label-2)	Lightstone.light.700:#4A4339Darkstone.dark.500:#CFC6B6
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)	Lightstone.light.200:#E4DDD0Darkstone.dark.100:#2E2A24
Success
Border Changes with theme	component.toast.success.bordercolor.border.defaultvar(--toast-success-border)	Lightstone.light.200:#E4DDD0Darkstone.dark.100:#2E2A24
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)	Lightstone.light.200:#E4DDD0Darkstone.dark.100:#2E2A24
Border 2 Changes with theme	component.toast.danger.border-2color.status.dangervar(--toast-danger-border-2)	Lightred.light.600:#C42B2BDarkred.dark.600:#F28B8B