Alert
Contextual feedback messages for success, warning, error, and informational states.
Information
This action will affect all users in your organization.
Variants
Four tones cover the feedback spectrum. Match severity to meaning and always include a specific, actionable message.
| Variant | Purpose |
|---|---|
| Info | Neutral announcements, tips, and in-progress updates. |
| Success | Confirmation that an action completed successfully. |
| Warning | Caution — something needs attention but is not blocking. |
| Error | Critical failure — the user must act. Never auto-dismiss. |
Design tokens
| Token | Value | Description |
|---|---|---|
background/state/info/subtle | #ecf7ff | Info background |
border/state/info | #00599d | Info border |
icon/state/info | #004275 | Info icon |
background/state/success/subtle | #eefff5 | Success background |
border/state/success | #049442 | Success border |
icon/state/success | #049442 | Success icon |
background/state/warning/subtle | #fff6ee | Warning background |
border/state/warning | #8c7314 | Warning border |
icon/state/warning | #6a560a | Warning icon |
background/state/error/subtle | #ffeae7 | Error background |
border/state/error | #bc1700 | Error border |
icon/state/error | #931200 | Error icon |
text/primary | #3b3b3d | Title text |
text/secondary | #4f5052 | Body + close icon |
radius/sm | 4px | Corner radius |
stroke-weight | 1px | Border width |
width | 480px | Fixed alert width |