Display

Alert

A callout in the flow of the page: an icon, a title, a description and an optional action.

packages/design-system/components/ui/alert.tsx

Examples

Proposal sent

The client has a link for 30 days.

Default

Payment failed

The card was declined. Try another one.

Destructive

New version

The proposal changed since you last saw it.

With an action

Anatomy

01Box, role="alert", rounded-2xl
02Icon, spans both rows
03Title
04Description
05Action, top right

Usage

import { Alert, AlertAction, AlertDescription, AlertTitle } from "@repo/design-system/components/ui/alert";

<Alert variant="destructive">
  <CircleAlertIcon />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>The card was declined.</AlertDescription>
</Alert>

Props

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	Destructive turns the text and icon red on the card background.
className	string	none	Merged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Say what happened and what to do next.

Don't

Use it for confirmations that should disappear. Use a toast.