Design System v1.0

Alert

Inline messages that communicate status, warnings, and errors.

Status variants

Default, success, warning, and destructive tones.

Dismissible

An alert the user can close.

With action

An alert with an inline action button.

File upload with progress

An alert showing upload progress.

Soft success

A low-contrast success alert with a tinted background.

Soft warning

A low-contrast warning alert with a tinted background.

Soft info

A low-contrast informational alert with a tinted background.

Soft destructive

A low-contrast error alert with a tinted background.

API reference

A callout box laying out an optional icon, AlertTitle, AlertDescription, and a top-right AlertAction.

Anatomy
AlertRoot callout container with role=alert and variant styling.
AlertTitleBold single-line heading text for the alert.
AlertDescriptionSecondary descriptive body text below the title.
AlertActionTop-right slot for a dismiss or action button.
Props
PartPropTypeDefaultDescription
Alertvariant"default" | "destructive" | "success" | "warning" | "info""default"Tone: default, destructive, success, warning, or info.

Command Palette

Search for a command to run...