DesignKit: design tools and components

Playground

Design system

Tone

Dismissible

alert

comfortable

Review required

Needs one more sign-off.

Family: Status
Complexity: core
Status: stable
Mathematical fixtures: 5

statusdismissactionsinline messaging

Overview

Keep important feedback in the page flow. Use Toast for transient feedback and Dialog for a required decision.

Aliases

inline alert, notice

Foundations

Color,Contrast and distinctness,Proof system

When to use

Use Alert for persistent inline status, warnings, and success messages near the affected content.
Use the actions slot when the user can fix or continue from the message directly.

When not to use

Do not use Alert for transient feedback that can safely disappear; use Toast instead.
Do not use Alert when the user must stop and decide before continuing; use Dialog instead.

Structural parts

message shell

root

Carries tone, border, and background treatment.

supporting icon slot

icon

Optional semantic cue before the copy.

message heading

title

Short summary of the status or issue.

supporting copy

description

Clarifies impact or next steps.

follow-up actions

actions

Optional action area for repair or progression.

Public interface

Props
Name	Type	Default	Description
`tone`	`'brand' \| 'success' \| 'warning' \| 'danger'`	`'brand'`	Chooses the semantic message tone.
`title`	`string`	`—`	Primary alert heading.
`description`	`string`	`—`	Supporting alert copy.
`dismissible`	`boolean`	`false`	Shows a dismiss control.
`onDismiss`	`() => void`	`—`	Receives dismissal.
`theme`	`ThemeContract`	`—`	Sets the theme used to resolve component styles.

Events
Name	Payload	Description
`dismiss`	`void`	Fires when the alert is dismissed.

Slots
Name	Description
`icon`	Optional icon or symbol reinforcing the tone.
`actions`	Optional inline follow-up actions.
`default`	Optional custom body content when the title/description pair is not enough.

Variants, sizes, and states

Variants

brand: Informational or product-state messaging.
success: Positive confirmation with lower urgency.
warning: Needs attention but does not necessarily block progress.
danger: High-risk or blocking issue state.

Sizes

default: Alert uses one structural size and relies on content length and tone.

States

dismissed: Optional removed state after the user dismisses the alert.

Accessibility

Semantics

Stays in the normal document flow so the message remains associated with nearby content.

Keyboard

Dismiss buttons and action buttons remain keyboard reachable as ordinary controls.

Screen readers

The title and description provide the message. Add live-region behavior in your app when the context requires announcements.

Caveats

This component is for inline messaging, not assertive global live announcements.

Checklist

Verify that the control has an accessible name.
Verify that keyboard focus is visible in every state and size.
Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-alert-bg: #d7e9ff
--dk-alert-fg: #000f4d
--dk-alert-border: #2072e4
--dk-alert-border-width: 1px
--dk-alert-radius: clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-alert-padding: clamp(1.778rem, 1.6296rem + 0.658vw, 2.222rem)
--dk-alert-gap: clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)

icon

--dk-alert-icon-size: clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)

title

--dk-alert-title-color: inherit
--dk-alert-title-size: clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-alert-title-weight: 700

description

--dk-alert-description-color: inherit
--dk-alert-description-size: clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

actions

--dk-alert-actions-gap: clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

dismiss

--dk-alert-dismiss-size: 44px

Examples

Starter

Inline notice

A neutral inline alert with one clear message.

<Alert tone="brand" title="Review required" description="This workspace needs one more sign-off." />

Common patterns

Inline repair action

Add actions when the user can resolve the issue immediately.

<Alert tone="warning" title="Missing details" description="Add the ship date before publishing."><svelte:fragment slot="actions"><Button size="sm">Add date</Button></svelte:fragment></Alert>

Edge cases

Dismissible status

Use dismiss only when hiding the message is safe.

<Alert tone="success" title="Changes saved" dismissible={true} />

If the message matters later, also leave a durable trace elsewhere in the UI.

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

neutral

pass

tone=neutral

Evidence: mathematical
Coverage: complete (4 / 4 declared kinds evaluated)
Declared: contrast, target, layout, helperText
Evaluated: contrast, target, layout, helperText
Contrast: 90.8 Lc, 90.8 Lc
Target: 44 px
Layout: root · single-line 0 px single-line estimate; 0 px minimum width
280 px: pass 360 px: pass
Helper: 3/2

brand

pass

tone=brand

Evidence: mathematical
Coverage: complete (4 / 4 declared kinds evaluated)
Declared: contrast, target, layout, helperText
Evaluated: contrast, target, layout, helperText
Contrast: 89.9 Lc, 89.9 Lc
Target: 44 px
Layout: root · single-line 0 px single-line estimate; 0 px minimum width
280 px: pass 360 px: pass
Helper: 3/2

success

pass

tone=success

Evidence: mathematical
Coverage: complete (4 / 4 declared kinds evaluated)
Declared: contrast, target, layout, helperText
Evaluated: contrast, target, layout, helperText
Contrast: 39.9 Lc, 39.9 Lc
Target: 44 px
Layout: root · single-line 0 px single-line estimate; 0 px minimum width
280 px: pass 360 px: pass
Helper: 3/2

warning

pass

tone=warning

Evidence: mathematical
Coverage: complete (4 / 4 declared kinds evaluated)
Declared: contrast, target, layout, helperText
Evaluated: contrast, target, layout, helperText
Contrast: 59.8 Lc, 59.8 Lc
Target: 44 px
Layout: root · single-line 0 px single-line estimate; 0 px minimum width
280 px: pass 360 px: pass
Helper: 3/2

danger

pass

tone=danger

Evidence: mathematical
Coverage: complete (4 / 4 declared kinds evaluated)
Declared: contrast, target, layout, helperText
Evaluated: contrast, target, layout, helperText
Contrast: 80.5 Lc, 80.5 Lc
Target: 44 px
Layout: root · single-line 0 px single-line estimate; 0 px minimum width
280 px: pass 360 px: pass
Helper: 3/2

Related components and foundations

Status or category label with semantic tones.

Content container with header, footer, and media slots.

Toast

Transient notification stack with actions and dismissal.

Badge

Status or category label with semantic tones.

Dialog

Modal dialog with focus containment and configurable dismissal.

Color

Generate tonal scales and semantic colors from one seed.

Contrast and distinctness

Check foreground contrast and separation between related colors.

Proof system

Inspect calculated component checks and their coverage.

Badge

Status or category label with semantic tones.

Progress

Linear progress indicator with a label and semantic tones.

Toast

Transient notification stack with actions and dismissal.