Alert
<Alert>TailwindCSS ModulesA prominent status message that can be displayed inline within a page, as a card, or as a floating notification.
InstallationColoxo CLI
npx coloxo add alert --style coloxo-cssES Module ImportPlayground / npm package
import { Alert } from '@coloxo/ui';Design Tokens:
--cx-brand-50: #EEF2FF--cx-success-50: #ECFDF5--cx-warning-50: #FFFBEB--cx-error-50: #FEF2F2--cx-radius-lg: 10px
1. Variant Matrix
Alerts support 4 semantic variants and 3 distinct layouts depending on the context.
| Info | Success | Warning | Error | |
|---|---|---|---|---|
| Card (Default) | System update Scheduled for tonight. | Profile saved Your details are up to date. | Storage full Upgrade your plan soon. | Payment failed Check your card details. |
| Inline | System update | Profile saved | Storage full | Payment failed |
2. Interactive Props Configurator
Show Description
Show Action Button
Closable
Visual Render Canvas
Policy update
Changes take effect Monday.
tsx
<Alert variant="info" type="card" title="Policy update" description="Changes take effect Monday." closable/>3. Dark theme
Alert backgrounds map to distinct dark mode palettes to maintain their semantic meaning.
System update
Scheduled for tonight.
Payment failed
Check your card details.
4. Enterprise layout compositions
Inline alerts are perfect for form validation blocks, while cards sit at the top of content sections.
Billing Information
Payment method expiring
Your visa ending in 4242 will expire next month. Please update it to avoid service interruption.
Accessibility
Role Alert
Alerts automatically carry `role="alert"` which immediately interrupts the screen reader to announce the content.
Decorative Icons
Status icons (info, check, warning, error) are decorative. Screen readers rely entirely on the title and description for meaning.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "error" | info | Tone (Ant Design type). |
| type | "card" | "inline" | "floating" | card | Coloxo layout — not Ant Design type. |
| title / message | ReactNode | — | Main heading; message is the Ant Design alias. |
| description | ReactNode | — | Secondary text detailing the alert context. |
| banner | boolean | — | Full-bleed banner; defaults variant to warning when variant omitted. |
| showIcon | boolean | true | Show status icon. |
| icon | ReactNode | null | — | Custom icon; null hides. |
| closable | boolean | { closeIcon?, onClose?, afterClose? } | — | Dismiss control with optional callbacks. |
| closeIcon | ReactNode | — | Custom close icon. |
| afterClose | () => void | — | Called after exit animation (~200ms). |
| action | ReactNode | — | Trailing action on the same row as content. |