15Shipped
Alert
Inline status alert with icon, title, and description. role=alert.
Import
import { Alert, AlertTitle, AlertDescription } from "@charply/design"Variants
With icon
Warning
You're approaching your daily generation limit.
Destructive
Failed to save reply. Try again.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "info" | "warning" | "success" | "destructive" | "default" | Visual intent |
Guidelines
docs/design/components/alert.mdDo
- ✓Place icon as first child for grid layout alignment
- ✓Use `AlertDescription` for supporting copy
- ✓Use `destructive` for errors that need immediate attention
Don't
- ✗Use `Alert` for upsell banners with primary CTAs — use `Callout`
- ✗Omit text content — alerts must be readable, not icon-only
- ✗Stack many alerts — consolidate into one message
- ✗---
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.