Alert
Displays a callout for user attention.
Alert
Heads up
You can add components to your app using the CLI.
Payment successful
Your subscription has been renewed for another year.
Storage almost full
You've used 92% of your storage. Consider upgrading your plan.
Connection failed
Could not connect to the server. Please try again.
Custom icon
Pass any icon via the
icon prop.Installation
1pnpm dlx shadcn@latest add @glasswave/alertUsage
1import { Alert, AlertTitle, AlertDescription } from 'glasswave';1<Alert variant="default | success | warning | destructive">2 <AlertTitle>Heads up</AlertTitle>3 <AlertDescription>4 This is an alert with a title and description.5 </AlertDescription>6</Alert>Each variant ships a matching system-color icon. Pass your own with the
icon prop, or icon={null} to hide it:
1<Alert icon={<Sparkles />}>2 <AlertTitle>Custom icon</AlertTitle>3 <AlertDescription>Any icon works here.</AlertDescription>4</Alert>API Reference
Alert
| Prop | Type | Default |
|---|---|---|
variant | "default" | "destructive" | "success" | "warning" | "default" |
icon | ReactNode | — |
className | string | — |
Pass icon={null} to hide the leading icon. AlertTitle and AlertDescription accept children and className.