Status and feedback
Alert
components/ui/alertStatus messages with a tone, a title and a detail line.
Alert live demo
Changes are saved
Everything is up to date.
Connection is slow
Retrying in a moment.
Upload failed
The file couldn't be read.
Craft notes
- Tone picks the icon and its color; the title always carries the meaning
- Icons are hidden from assistive technology, so nothing is read twice
- A raised fill with no border sits on any surface at an 8px radius
Play it
Flip the theme from the top bar and watch each tone keep its contrast in light and dark.
Sounds: none, it stays quiet
Variants
Every prop combination the component supports. The chip on each card is the exact props it passes.
Success
tone="ok"Confirms that something finished.
Sounds are ready
All cues are available.
Warning
tone="warn"Something needs attention but nothing broke.
Audio is paused
Tap anywhere to resume.
Error
tone="bad"Something failed and needs a different action.
Output unavailable
Check your device's sound settings.
Information
tone="info"Neutral news that does not need action.
New sounds
Glass and Liquid collections are in the library.