Component

Alert

Inline status message with optional icon, title, description and action slot.

Alertvariant: default · destructive

AlertTitlebold heading, col-2 when icon present

AlertDescriptionmuted supporting text

AlertActionslot pinned to top-right

Playground

Heads up!

You can add components to your app using the CLI.

Variant— variant

Title— title

Description— description

Show icon— showIcon

Show action— showAction

Variants

default — informational

Heads up!

You can add components to your app using the CLI.

destructive — error or warning

Something went wrong

Your session has expired. Please sign in again to continue.

Title only — no description

Changes saved successfully.

Without icon

Update available

A new version of the app is ready to install.

With action

dismiss button

Deployment queued

Your changes will go live in a few minutes.

destructive with retry action

Payment failed

We couldn't process your payment. Update your billing details.

Long content — wraps and balances

Unable to process your payment.

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Contact your bank if the issue persists

Tokens used

6 semantic tokens consumed by this component.

--cardCard

bg-card

--card-foregroundCard Foreground

text-card-foreground

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive

--destructive-foregroundDestructive Foreground

text-destructive-foreground

--muted-foregroundMuted Foreground

text-muted-foreground

--borderBorder

border-borderborder