Alert
FREEInline info, success, warning and error messages with actions and dismiss.
Installation
Terminal
npx @bloxa/cli add alert
# or: npx shadcn@latest add @bloxa/alertPackages installed automatically: motion
Examples
Variants
Heads up
Your trial ends in 3 days.
New version available
Bloxa 0.2 adds overlays and notifications.
Payment received
We emailed the receipt to [email protected].
Storage almost full
You are using 92% of your space.
Deployment failed
The build step exited with code 1.
Actions, appearances and dismiss
Enable two-factor authentication
Protect your account with a code from your phone.
Domain connected
Scheduled maintenance on Sunday, 02:00–03:00.
API reference
Every component also accepts the props of the element it renders.
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "info" | "success" | "warning" | "destructive" | "default" | Kind; sets color and icon. |
| appearance | "soft" | "outline" | "accent-bar" | "soft" | Look. |
| title | ReactNode | — | Title. |
| icon | ReactNode | false | — | Custom icon, or hide it. |
| actions | ReactNode | — | Buttons. |
| actionsInline | boolean | false | Put actions on the right. |
| dismissible | boolean | false | × closes it with a collapse. |
| onDismiss | () => void | — | Called after it closes. |