Alert
An inline notification banner for important messages. Supports default and destructive variants with optional leading icon.
Heads up!
You can add components to your app via the CLI with
pnpm dlx @hex-core/cli add.Error
Your session has expired. Please sign in again.
Installation
pnpm
pnpm dlx @hex-core/cli add alertDestructive alert
Error alert
tsx
<Alert variant="destructive">
<AlertTitle>Error</AlertTitle>
<AlertDescription>Your session has expired. Please sign in again.</AlertDescription>
</Alert>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | default | Visual style |
className | string | — | Additional CSS classes |
AI Guidance
When to use
Use for inline, persistent messages that contextualize a page or section: info banners, warning about deprecated features, error summaries above forms.
When not to use
Don't use for transient messages (use Toast/Sonner). Don't use for modal confirmations (use AlertDialog). Don't use as the only way to communicate a critical error — pair with field-level feedback.
Common mistakes
- Using destructive for non-error messages
- Missing AlertTitle (reduces scannability)
- Stacking multiple Alerts on the same page instead of grouping
Accessibility
Root renders role='alert' so screen readers announce it. For non-urgent info banners consider role='status' or aria-live='polite' via className overrides.
Related components
Token budget: 350