Alert
A contextual message that communicates status, consequence or a required next step.
Added in v2.5.0 · import from "@borneo/react"
Live previewPermalink to this section
This is the production component using the active theme and component contracts.
Payment method expires soon
Replace the card before 30 September to avoid an interruption.
AnatomyPermalink to this section
Every visible part has one job and a clear requirement.
| Part | Requirement | Purpose |
|---|---|---|
| Status icon | Required | Reinforces tone without carrying it alone. |
| Title | Required | Summarises the message in one line. |
| Description | Optional | Adds cause, consequence or recovery guidance. |
| Action or dismiss | Optional | Provides one direct response or removes a non-critical message. |
Variants and statesPermalink to this section
Choose a variant for meaning or layout need, never decoration alone.
| Variant | Use |
|---|---|
| Info | Neutral guidance or new context. |
| Success | A completed action or healthy state. |
| Warning | A recoverable issue needing attention. |
| Danger | An error or destructive consequence. |