Skip to content

Alert

A message about the page or an action. No role when it's part of the page; live when it appears in response to something.

Sourcecomponents/alert.tsx

Scheduled maintenance

Sync pauses Sunday 02:00–03:00 UTC.

Your trial ends in 3 days

Add a payment method to keep your projects.

Couldn’t sync 2 files

They’re over the 50 MB limit.

New: keyboard shortcuts

Press ? anywhere to see them.

Usage

Alert usage
import { Alert, AlertDescription, AlertTitle } from "@/components/alert";
export function AlertUsage() {  return (    <Alert variant="warning">      <AlertTitle>Your trial ends in 3 days</AlertTitle>      <AlertDescription>Add a payment method to keep your briefs.</AlertDescription>    </Alert>  );}

When to use

Use when

A message about the page or an action (info/success/warning/danger). live only when it appears in response to something; AlertDismiss to close it

Don’t use when

A brief confirmation that disappears on its own (use a toast); form field errors (use FieldError)