Alert

Stable

Displays a callout for user attention.

Examples

Default (Primary)

tsx
<Alert title="System Diagnostic" icon={<Terminal className="h-4.5 w-4.5 text-cyan-400" />}>
  All systems are functioning within normal parameters.
</Alert>

Destructive

tsx
<Alert variant="destructive" title="Security Breach">
  Unauthorized access detected in sector 4.
</Alert>

Warning

tsx
<Alert variant="warning" title="High CPU Usage">
  Node 7 is experiencing 98% CPU load.
</Alert>

API Reference

PropertyDescriptionTypeDefault
variantThe visual style variant."info" | "success" | "warning" | "destructive""info"
titleThe title of the alert.string-
iconCustom icon element.React.ReactNode-
closableWhether to show a close button.booleanfalse