Alert

A message that stays on the page with the content it is about.

In Multi-brand

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Alert in StorybookSee it in dark

When to use it

In Multi-brand: Billing problems.

• Use it when: People need to read a standing notice or how to recover, on this page, tied to what they are doing.
• Not when: A short confirmation that can go away by itself, or one notice for the whole site.

Instead:

• Toast: Short, non-blocking, goes away.
• Dialog: Needs an answer before going on.
• Site banner: One full-width notice for the whole site.

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.

defaultvariantNot used in Multi-brand

Start Storybook to see it live

What it is for

A notice that stays on the page: information or a heads-up.

✓A note people should read but need not fix.

✕Something failed and must be fixed.

In Multi-brand

Alerts here are for billing problems; news is a badge or a toast.

Because

What is the main content?Forms and tasks · content.q1Which outcome matters most?Completion without errors · outcomes.q1

destructivevariantUsed in Multi-brand

Start Storybook to see it live

What it is for

Something failed or will be lost, and people must act to recover.

✓An error, with what went wrong and how to fix it.

✕A plain note dressed as danger for emphasis.

In Multi-brand

A billing problem such as a declined card: plain and specific, the same in every brand.

Because

How many signals carry each meaning?Two: color and word · accessibility.countWhat is a costly mistake?Looking off-brand · outcomes.q2How is the voice defined?A shared core, brand tone on top · voice.definition

How Multi-brand uses it

An error message

Use color.status.danger and a sentence

Not The brand color

Status colors are shared, never branded.

Why it works this way

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

What is the main content?content.q1

1The answer

Forms and tasks

Product pages, sign-up and account forms.

2So Alert

• –does not use default: Alerts here are for billing problems; news is a badge or a toast.

It also shapes Badge: warning Input group: inline-start Input group: inline-end Input group: block-start Input group: block-end Item: outline

3If it changed

1

Alert decision would reopen

and 9 answers that follow from it: A moderate amount, Gaps, insets and row heights, Comfortable, and 6 more.

Which outcome matters most?outcomes.q1

1The answer

Completion without errors

Finished sign-ups and orders.

2So Alert

• –does not use default: Alerts here are for billing problems; news is a badge or a toast.

It also shapes Button: primary Button: large

3If it changed

1

Alert decision would reopen

No other answer follows from it.

How many signals carry each meaning?accessibility.count

1The answer

Two: color and word

Brand colors vary, so meaning needs a word.

2So Alert

• ✓uses destructive: A billing problem such as a declined card: plain and specific, the same in every brand.

It also shapes Badge: neutral Badge: info Badge: success Badge: warning Badge: danger

3If it changed

1

Alert decision would reopen

No other answer follows from it.

What is a costly mistake?outcomes.q2

1The answer

Looking off-brand

A page that looks like the wrong brand loses trust.

2So Alert

• ✓uses destructive: A billing problem such as a declined card: plain and specific, the same in every brand.

It also shapes Button: secondary Button: danger Badge: danger

3If it changed

1

Alert decision would reopen

and 1 answer that follow from it: Also for emphasis and size.

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 Alert

• ✓uses destructive: A billing problem such as a declined card: plain and specific, the same in every brand.

It also shapes Toast: neutral Toast: danger Empty: default

3If it changed

1

Alert 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:

• An error that appears after an action is announced (role alert); a standing note is not. undefined
• The tone also shows as an icon and words, never color alone. undefined

Use it in code

npx open-ds add alert

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

Tokens it reads

Alert reads 15 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 Alert's tokens to change Alert 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
Alert
Gap y	component.alert.gap-ycomponent-spacing-map.hairlinevar(--alert-gap-y)	space.2:0.125rem
Corner Changes with theme	component.alert.radiusradius.containervar(--alert-radius)	Aster Lightradius.8:0.5remAster Darkradius.8:0.5remBirch Lightradius.16:1remBirch Darkradius.16:1remCoral Lightradius.20:1.25remCoral Darkradius.20:1.25rem
Padding, left and right	component.alert.padding-xspace.inset.containervar(--alert-padding-x)	space.24:1.5rem
Padding, top and bottom	component.alert.padding-ycomponent-spacing-map.x3var(--alert-padding-y)	space.20:1.25rem
Text size	component.alert.font-sizetype.body.font-sizevar(--alert-font-size)	font.size.16:1rem
Gap x	component.alert.gap-xcomponent-spacing-map.x3var(--alert-gap-x)	space.20:1.25rem
Icon size	component.alert.icon-sizesize.iconvar(--alert-icon-size)	size.16:1rem
Default
Fill Changes with theme	component.alert.default.backgroundcolor.surface.defaultvar(--alert-default-background)	Aster Lightslate-deep.light.0:#FFFFFFAster Darkslate-deep.dark.50:#0F172ABirch Lightslate-deep.light.0:#FFFFFFBirch Darkslate-deep.dark.50:#0F172ACoral Lightslate-deep.light.0:#FFFFFFCoral Darkslate-deep.dark.50:#0F172A
Text Changes with theme	component.alert.default.labelcolor.text.primaryvar(--alert-default-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
Destructive
Fill Changes with theme	component.alert.destructive.backgroundcolor.surface.defaultvar(--alert-destructive-background)	Aster Lightslate-deep.light.0:#FFFFFFAster Darkslate-deep.dark.50:#0F172ABirch Lightslate-deep.light.0:#FFFFFFBirch Darkslate-deep.dark.50:#0F172ACoral Lightslate-deep.light.0:#FFFFFFCoral Darkslate-deep.dark.50:#0F172A
Text Changes with theme	component.alert.destructive.labelcolor.status.dangervar(--alert-destructive-label)	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
Title
Weight	component.alert.title.font-weighttype.label.font-weightvar(--alert-title-font-weight)	font.weight.600:600
Description
Gap	component.alert.description.gapspace.gap.tightvar(--alert-description-gap)	space.8:0.5rem
Text size	component.alert.description.font-sizetype.body.font-sizevar(--alert-description-font-size)	font.size.16:1rem
Text Changes with theme	component.alert.description.labelcolor.text.mutedvar(--alert-description-label)	Aster Lightslate-deep.light.600:#4B5A6FAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.600:#4B5A6FBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.600:#4B5A6FCoral Darkslate-deep.dark.400:#96A3B5
From the system
Edge Changes with theme	color.border.default straight from the system, through --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