Components / Alert

Alert

<Alert />Stable

Inline, in-layout callout for decisions and notifications. Six semantic tones — primary (brand, the default), neutral, info, success, warning, error — in soft (tinted) or outline appearance, persistent or dismissible. The tint + icon carry the tone; title and description stay neutral so longer copy reads cleanly. Use Toast/Sonner for transient floating messages; use AlertDialog for blocking confirmations.

import { Alert, AlertTitle, AlertDescription } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Heads up — practice film just landed.

Marcus Reed's week 6 game tape is in your inbox.

Code

import { Alert } from "@/components/upnext";


<Alert />

Variants

The six tones in the default soft appearance. Tone drives the bg tint and icon; warning + error announce assertively (role=alert), the rest are polite (role=status).

Welcome to the new recruiting board.

Your watchlist, film, and offers now live in one place.

{/* primary is the default tone — omit it */}
<Alert>
  <AlertTitle>Welcome to the new recruiting board.</AlertTitle>
  <AlertDescription>Your watchlist, film, and offers now live in one place.</AlertDescription>
</Alert>

Composition

Outline appearance, one-liners, dismissible, and actions (single or a pair) via the `action` prop — placed below (footer) or aside (inline-end).

Offer letter signed and sent.

Quieter than soft — card fill with a tone-colored border + icon.

Two visits scheduled this week.

<Alert tone="success" appearance="outline">
  <AlertTitle>Offer letter signed and sent.</AlertTitle>
  <AlertDescription>Card fill with a tone-colored border + icon.</AlertDescription>
</Alert>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.