Alert

Alert displays a short, prominent message to inform the user of a status or error without interrupting their workflow. Use inline within page content for contextual feedback; for ephemeral notifications, use Sonner.

Basic usage

Code

<Alert>
  <AlertTitle>Order ready for review</AlertTitle>

  <AlertDescription>
    Pricing and availability were updated after the last save.
  </AlertDescription>
</Alert>

Destructive

Code

<Alert variant="destructive">
  <AlertTitle>Order failed to sync</AlertTitle>

  <AlertDescription>
    Retry the sync before releasing this order to fulfillment.
  </AlertDescription>

  <AlertAction>
    <Button variant="outline" size="sm">
      Retry sync
    </Button>
  </AlertAction>
</Alert>

API

Alert

Name	Type/Description
variant	"default" | "destructive" | null | undefined

AlertAction

No documented props

AlertDescription

No documented props

AlertTitle

No documented props