On this page
Overview
Show code, BlockedRelease.tsx
Variants
- Info
Something to know about the page. The default.
- Success
A result that stays relevant, where a toast would leave too soon.
- Warning
A problem to come unless people act.
- Danger
Something that failed or stopped working.
Show code, Tones.tsx
Another icon, or none
An alert can take another icon in place of its tone's, or none at all.
Show code, CustomIcon.tsx
Anatomy
Container
Icon
Title
Message
Actions
Dismiss button
Show code, AlertAnatomy.tsx
Behaviour
Announce a failure
A warning or a danger alert that appears because of something people just did, such as a save that failed, can be read out at once. Info and success alerts are always read politely, without interrupting.
Show code, SaveFailed.tsx
Rules
An alert sits above the content it concerns.
Use it when
- A message that stays until it no longer applies, such as a paused sync
- A failure beside what it concerns, such as a save that didn't go through
- A warning before people act in a section, such as storage almost full
Show code, OneAlert.tsx
Show code, StackedAlerts.tsx
Removing an alert
Remove an alert once it no longer applies. Let people dismiss it only where the message can safely be hidden.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the action, then the dismiss button. |
| Enter, Space | Presses the focused button. |