Contextual feedback messages for success, warning, error, and informational states.
Interactive previews with copy-ready code snippets. Alerts communicate system feedback — match tone to severity and always include actionable guidance.
Four semantic tones for every feedback context. Use tone to immediately signal the nature of the message.
Your session will expire in 15 minutes. Save your work to avoid losing changes.
Changes saved successfully. Your profile has been updated.
Your storage is 85% full. Consider removing unused files.
Unable to save changes. Check your connection and try again.
Add an optional bold title to give the alert a clear heading before the body text — useful when the body is longer or more detailed.
Scheduled maintenance
The system will be unavailable on Sunday, 16 March from 02:00–04:00 UTC.
Payment received
Your payment of $49.00 was processed successfully. A receipt has been sent to your email.
Unsaved changes
You have unsaved changes. Leaving this page will discard your edits.
Action required
Your subscription has expired. Renew now to restore access to all features.
Add a dismiss button for non-critical alerts that users can clear once acknowledged. Always handle onDismiss to hide the alert.
Update available
A new version of the design system is available. Review the changelog before upgrading.
Use an error alert above a form to surface validation errors after submission. List specific issues to help users fix them.
Please fix the following errors
Email address is invalid. Password must be at least 8 characters long.
Use an informational alert for non-urgent system notices such as maintenance windows, feature announcements, or policy changes.
Planned maintenance window
We will be performing scheduled infrastructure maintenance on Saturday, 15 March 2026 from 01:00 to 03:00 UTC. During this time the service may be intermittently unavailable. We apologise for any inconvenience and recommend saving your work before this window.
Scheduled maintenance
The service will be briefly unavailable on Sunday from 02:00–04:00 UTC.
① Container
Tinted background, matching border, rounded-lg
② Icon
Tone-specific SVG, 18×18px, flex-shrink-0
③ Title
Optional — semibold, tone-matched dark text
④ Body text
Required — regular weight, slightly lighter than title
⑤ Dismiss ×
Optional — 16×16px close icon, 60% opacity at rest
All four tones shown with and without titles. Alerts are static — they have no hover or focus states, only the dismiss button is interactive.
Without title
Your session will expire in 15 minutes.
Changes saved successfully.
Your storage is 85% full.
Unable to process your request. Please try again.
With title
Information
Your session will expire in 15 minutes.
Success
Changes saved successfully.
Warning
Your storage is 85% full.
Error
Unable to process your request. Please try again.
| Token | Value | Description |
|---|---|---|
background/state/info/subtle | #eff6ff | Info fill |
background/state/success/subtle | #f0fdf4 | Success fill |
background/state/warning/subtle | #fffbeb | Warning fill |
background/state/error/subtle | #fef2f2 | Error fill |
border/state/info | #bfdbfe | Info border |
border/state/success | #bbf7d0 | Success border |
border/state/warning | #fde68a | Warning border |
border/state/error | #fecaca | Error border |
icon/state/info | #2563eb | Info icon |
icon/state/success | #16a34a | Success icon |
icon/state/warning | #d97706 | Warning icon |
icon/state/error | #dc2626 | Error icon |
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "info" | "success" | "warning" | "error" | "info" | Semantic colour tone — sets background, border, icon, and text colours. |
title | string | — | Optional bold title rendered above the body text. |
dismissible | boolean | false | Show a × close button in the top-right corner of the alert. |
onDismiss | () => void | — | Callback fired when the dismiss button is clicked. |
children | React.ReactNode | — | Alert body content — the main message text. |
Do
Don't
