Feedback
Alert
A status message inside the page, in four semantic variants.
Examples
Heads upReviews close on Friday.
SavedYour changes are live.
Storage almost fullYou have used 90% of your plan.
Upload failedCheck the file format and retry.
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Icon | Decorative, reinforces the type | Required |
| 2 | Title | Short, bold | Required |
| 3 | Message | One or two lines | Required |
| 4 | Action | Optional link or button | Optional |
| 5 | Dismiss | Optional close button | Optional |
Specifications
| Variants | Info · Success · Warning · Error |
|---|---|
| Styles | Filled · Outlined |
Interaction
| Key | Result |
|---|---|
| Tab | Reaches actions and the close button |
| Esc | Not used; the alert is part of the page |
| Trigger | Response |
|---|---|
| Appear | Fades in 200ms; focus is not moved |
Accessibility
role · alert / status
1.4.1Use of Colour1.4.3Contrast (Minimum)4.1.3Status Messages
| Requirement | How Rig meets it |
|---|---|
| Roles | role="alert" for errors that need attention now; role="status" for information, success and warnings |
| Not colour only | Icon, title and text carry the type |
| Contrast | Text on tinted background at 4.5:1 |
| Focus | Never steal focus for a non-blocking message |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Say what happened and what to do next | Do not stack more than two alerts |
| Do not use alerts for confirmation of routine actions (use Toast) |
Notes from the Figma file
- Background overlays map automatically between light and dark.