Components
Alert
A non-modal, inline message for status, warnings, and errors.
Overview
Alert displays non-modal messages directly in the page content. It supports five severity variants and optional dismiss functionality.
Default Alert
This is a default alert for general information.
Info
Your trial expires in 3 days.
Success
Your changes have been saved.
Warning
This action cannot be undone easily.
Error
Failed to save. Please try again.
Dismissible
Click the X to dismiss this alert.
Usage
<Alert variant="info">
<Alert.Title>Heads up!</Alert.Title>
<Alert.Description>You can customize this alert.</Alert.Description>
</Alert>Variants
- default — Neutral
- info — Informational (blue)
- success — Positive outcome (green)
- warning — Caution required (yellow)
- destructive — Error/danger (red)
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'destructive' | 'default' | Visual severity |
isDismissible | boolean | false | Show dismiss button |
onDismiss | () => void | — | Callback on dismiss |
Related Components
- Toast — For transient popup notifications