Component docs

Alert

An inline message that tells the user something important about the current view — information, success, a warning, or an error — with the right announcement for how it arrived.

Basic usage

Install the package:

pnpm add @design-schema/react @design-schema/tokens

Import the stylesheet once for the app, then the component:

import '@design-schema/tokens/calm-precise/css';
import '@design-schema/react/index.css';
import { Alert } from '@design-schema/react';

Examples

Some features are unavailable while you are offline.

import { Alert } from '@design-schema/react';

<Alert>Some features are unavailable while you are offline.</Alert>

Props

5 rows

Prop	Type	Default	Description	Platforms
tone	info \| success \| warning \| danger	info	What kind of message this is. Sets the colors and the icon, which together convey the tone without relying on color. There is deliberately no `neutral` tone: every value here says something about urgency, and a message that says nothing about urgency is not an Alert.	web, lit, rn, swiftui
heading	string	—	A short bold first line for the message. Optional for one-line messages. An empty string is the same as no heading on every platform: no heading element is rendered and the name falls back to the body. Named `heading`, not `title`, because `title` is a native attribute (tooltip) on every platform element.	web, lit, rn, swiftui
children required	content	—	The message body. Text and Links; no headings or form controls.	web, lit, rn, swiftui
live	status \| alert \| off	status	How the alert is announced when it appears. `status` is polite (most messages), `alert` interrupts (only for errors that block the user), `off` for alerts already present when the view loads. Changing `live` after the first render swaps the role (or the live region) in place and never re-announces the message: only a change to the heading or the body is a new message. Accessibility: Maps to role=status, role=alert, or a plain region. React Native has no status role, so `status` there is accessibilityLiveRegion="polite" with no role at all. Never use `alert` for success or info.	web, lit, rn, swiftui
dismissible	boolean	false	Shows a dismiss button at the end of the alert. Activating it fires `onDismiss`; the consumer removes the alert (the component is controlled by its presence in the tree).	web, lit, rn, swiftui

Events

1 row

Event	Type	Description	Platforms
onDismiss	onDismiss / dismiss	Fired when the user activates the dismiss button. The consumer removes the alert. The focus-onward step runs first, so focus has already left the alert by the time the handler runs and may unmount it synchronously. It carries no payload: the Lit `dismiss` CustomEvent is dispatched with no `detail` rather than an empty object.	web, lit, rn, swiftui

Accessibility

Implicit ARIA role: status.

Anatomy

containericonheadingbodydismissButton

What generation guarantees

Live region — Changes are announced through a live region, without moving focus.

Contrast — Text and meaningful non-text contrast meets WCAG AA; the pairs are listed below.

Visible focus — Keyboard focus is always drawn, from the theme’s focus tokens, and is never removed.

Keyboard operable — Everything the pointer can do here, the keyboard can do — see the keyboard section.

Target size — Interactive targets are at least 24×24 CSS pixels (WCAG 2.2 Target Size, minimum).

Contrast pairs