Alert

Displays a callout message to attract user attention. Supports icons and semantic variants for informational, success, warning, and error states.

Alert Types

Information

This is a default informational alert.

Success

Your changes have been saved successfully.

Warning

Your session is about to expire.

Error

Something went wrong. Please try again.

<Alert>
  <Info className="h-4 w-4" />
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>This is a default informational alert.</AlertDescription>
</Alert>

<Alert variant="success">
  <CheckCircle className="h-4 w-4" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

<Alert variant="warning">
  <AlertTriangle className="h-4 w-4" />
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Your session is about to expire.</AlertDescription>
</Alert>

<Alert variant="destructive">
  <XCircle className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong. Please try again.</AlertDescription>
</Alert>

API Reference

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "success" \| "warning"`	`"default"`	The visual style of the alert. Each variant uses its corresponding status color from the design tokens.
`className`	`string`	—	Additional CSS classes to apply to the alert element.