Alert
Status message strip for success, warning, error, and informational states. Two variants: floating card or full-width banner.
import
{ Alert } from "@pepulux/ui"Colors
Saved!
Your changes have been saved.
Heads up
Your trial ends in 3 days.
Error
Something went wrong. Please try again.
New feature
Dark mode is now available in settings.
Full-width variant
Payment confirmedReceipt sent to your email.
With actions
Upgrade required
You've reached your plan limit.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "default" | "gray" | "error" | "warning" | "success" | "brand" | "default" | Alert color variant |
| variant | "floating" | "full-width" | "floating" | Layout variant |
| title* | string | — | Bold heading text |
| supportingText | ReactNode | — | Supporting description |
| primaryAction | AlertAction | — | Primary action button { label, onClick } |
| secondaryAction | AlertAction | — | Secondary action { label, onClick } |
| onDismiss | () => void | — | Shows × close button when provided |