Toast

A short message that confirms an action and goes away.

In Multi-brand

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 Multi-brand: Confirms a saved change.

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

neutraltoneUsed in Multi-brand

Start Storybook to see it live

What it is for

A plain confirmation.

✓Something changed: cleared, copied, moved.

✕Something failed.

In Multi-brand

A shared line with brand words.

Because

How is the voice defined?A shared core, brand tone on top · voice.definition

successtoneUsed in Multi-brand

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 Multi-brand

Brand tone allowed: Aster calm, Birch friendly, Coral upbeat.

Because

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

dangertoneUsed in Multi-brand

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 Multi-brand

Shared across brands: plain and specific.

Because

How is the voice defined?A shared core, brand tone on top · voice.definitionHow does it sound?Plain and direct · voice.values

How Multi-brand uses it

The words of an error

Use Shared across brands: plain and specific

Not Brand tone in errors

Errors read the same in every brand, so support can help anyone. Example: “Your card was declined. Try another card or contact your bank.”

A success message

Use Brand tone allowed: Aster calm, Birch friendly, Coral upbeat

Not The same flat line in every brand

Success is a safe moment for brand tone. Example: “Aster: Your plan is active. · Birch: You're all set! · Coral: Let's go, your plan is live.”

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 is the voice defined?voice.definition

1The answer

A shared core, brand tone on top

Errors and confirmations are shared; brand tone sits on top.

2So Toast

• ✓uses neutral: A shared line with brand words.
• ✓uses danger: Shared across brands: plain and specific.

It also shapes Alert: destructive Empty: default

3If it changed

2

Toast decisions would reopen

No other answer follows from it.

How many tones does it use?voice.count

1The answer

One per brand

A shared core, with a tone per brand.

2So Toast

• ✓uses success: Brand tone allowed: Aster calm, Birch friendly, Coral upbeat.

3If it changed

1

Toast decision would reopen

No other answer follows from it.

How does it sound?voice.values

1The answer

Plain and direct

The shared core is plain and direct.

2So Toast

• ✓uses danger: Shared across brands: plain and specific.

3If it changed

1

Toast decision would reopen

No other answer follows from it.

Words

• Shared structure: object, state, next step.
• Brand tone lives in headlines and marketing copy, not in errors.
• Errors and confirmations read the same in every brand.
• Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Cancel
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Get started

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

Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and 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)	Aster Lightslate-deep.light.0:#FFFFFFAster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.0:#FFFFFFBirch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.0:#FFFFFFCoral Darkslate-deep.dark.100:#1E293B
Overlay radius Changes with theme	component.overlay.radiusradius.containervar(--overlay-radius)	Aster Lightradius.8:0.5remAster Darkradius.8:0.5remBirch Lightradius.16:1remBirch Darkradius.16:1remCoral Lightradius.20:1.25remCoral Darkradius.20:1.25rem
Overlay shadow Changes with theme	component.overlay.shadowelevation.overlayvar(--overlay-shadow)	Aster Lightshadow.overlay:0px 12px 32px 0px #0F172A29Aster Darkshadow.overlay-dark:0px 12px 32px 0px #00000080Birch Lightshadow.overlay:0px 12px 32px 0px #0F172A29Birch Darkshadow.overlay-dark:0px 12px 32px 0px #00000080Coral Lightshadow.overlay:0px 12px 32px 0px #0F172A29Coral Darkshadow.overlay-dark:0px 12px 32px 0px #00000080
Toast
Gap	component.toast.gapspace.gap.defaultvar(--toast-gap)	space.12:0.75rem
Padding	component.toast.paddingspace.inset.containervar(--toast-padding)	space.24:1.5rem
Text Changes with theme	component.toast.labelcolor.text.primaryvar(--toast-label)	Aster Lightslate-deep.light.900:#0F172AAster Darkslate-deep.dark.900:#F8FAFCBirch Lightslate-deep.light.900:#0F172ABirch Darkslate-deep.dark.900:#F8FAFCCoral Lightslate-deep.light.900:#0F172ACoral Darkslate-deep.dark.900:#F8FAFC
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.16:1rem
Label 2 Changes with theme	component.toast.label-2color.text.secondaryvar(--toast-label-2)	Aster Lightslate-deep.light.700:#334155Aster Darkslate-deep.dark.500:#CBD5E1Birch Lightslate-deep.light.700:#334155Birch Darkslate-deep.dark.500:#CBD5E1Coral Lightslate-deep.light.700:#334155Coral Darkslate-deep.dark.500:#CBD5E1
Font size 2	component.toast.font-size-2type.caption.font-sizevar(--toast-font-size-2)	font.size.13:0.8125rem
Neutral
Border Changes with theme	component.toast.neutral.bordercolor.border.defaultvar(--toast-neutral-border)	Aster Lightslate-deep.light.200:#E2E8F0Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.200:#E2E8F0Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.200:#E2E8F0Coral Darkslate-deep.dark.100:#1E293B
Success
Border Changes with theme	component.toast.success.bordercolor.border.defaultvar(--toast-success-border)	Aster Lightslate-deep.light.200:#E2E8F0Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.200:#E2E8F0Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.200:#E2E8F0Coral Darkslate-deep.dark.100:#1E293B
Border 2 Changes with theme	component.toast.success.border-2color.status.successvar(--toast-success-border-2)	Aster Lightgreen.light.600:#1F7A3AAster Darkgreen.dark.600:#5CC283Birch Lightgreen.light.600:#1F7A3ABirch Darkgreen.dark.600:#5CC283Coral Lightgreen.light.600:#1F7A3ACoral Darkgreen.dark.600:#5CC283
Danger
Border Changes with theme	component.toast.danger.bordercolor.border.defaultvar(--toast-danger-border)	Aster Lightslate-deep.light.200:#E2E8F0Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.200:#E2E8F0Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.200:#E2E8F0Coral Darkslate-deep.dark.100:#1E293B
Border 2 Changes with theme	component.toast.danger.border-2color.status.dangervar(--toast-danger-border-2)	Aster Lightred.light.600:#C42B2BAster Darkred.dark.600:#F28B8BBirch Lightred.light.600:#C42B2BBirch Darkred.dark.600:#F28B8BCoral Lightred.light.600:#C42B2BCoral Darkred.dark.600:#F28B8B