Alert

Contextual feedback messages with semantic variants.

Props

AlertProps

Prop	Type	Default	Description
variant	'info' | 'success' | 'warning' | 'destructive' | 'muted'	'info'	Visual variant
icon	LucideIcon	Auto-selected	Custom icon
hideIcon	boolean	false	Hide the icon
className	string	-	Additional class
children	ReactNode	-	Alert content

Compound Components

AlertTitle

Renders as <h5>. Accepts standard heading props.

AlertDescription

Renders as <p>. Accepts standard paragraph props.

Example

<Alert variant="warning">
  <AlertTitle>Unsaved changes</AlertTitle>
  <AlertDescription>
    You have unsaved changes that will be lost.
  </AlertDescription>
</Alert>

Variants

Variant	Icon	Use case
info	Info	Informational messages
success	CheckCircle	Success confirmations
warning	AlertTriangle	Warnings
destructive	XCircle	Errors
muted	-	Subtle context

See also

• Alert (Conceptual)