Feedback
Toast
A transient message that does not block the page.
Examples
Click to try: it pauses on hover and focus, and has a close button
Request sentMila will be notified.
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Icon | Decorative | Required |
| 2 | Title and message | Short | Required |
| 3 | Action | Optional single action | Optional |
| 4 | Close | Button with a name | Required |
Specifications
| Max width | 360px |
|---|---|
| Min height | 69px (auto height) |
| Padding | 16px / 14px |
| Motion | 200ms ease-out, scale and opacity |
| Accessibility | ARIA live region |
Interaction
| Key | Result |
|---|---|
| Tab | Reaches the close button and action |
| Esc | Dismisses the focused toast |
| Trigger | Response |
|---|---|
| Appear | Scales and fades in 200ms ease-out |
| Hover or focus | Auto-dismiss pauses |
| Timeout | At least 6 seconds, longer with an action |
Accessibility
role · status
2.2.1Timing Adjustable4.1.3Status Messages
| Requirement | How Rig meets it |
|---|---|
| Live region | role="status" container exists before the toast is added (WCAG 4.1.3) |
| Timing | Pause on hover and focus, never dismiss while the user is reading (WCAG 2.2.1) |
| Persist errors | Errors stay until dismissed |
| Max width | 360px; wraps instead of truncating |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Use for low-priority confirmation | Do not put the only way to recover an error in a toast |
| Do not stack more than three |