Components/Feedback
Alert
Alerts give short, timely feedback inside a page, from a saved change to a failed payment
Playground
Pick a size, status and style, then dismiss it to see how it leaves
Statuses
Five statuses, each with its own color and icon. The color carries the meaning, so the title still has to say what happened
Tip
Close an alert in any tile, it comes back after a moment so you can try again.
Styles
Filled is the loudest, for problems that block the task. Light suits most messages. Stroke sits quietly on white pages and cards
Sizes
Small and Medium are one line, for forms and toolbars. Large adds a description and up to two actions
When to use
Use when
- Feedback belongs to one part of the page, like a form or a card
- The message should stay until people read or dismiss it
- People may need to act on it, like retrying a payment
Avoid when
- The message is about the whole product or account, use a Banner
- The feedback is short-lived and needs no action, use a toast
- People must decide before going on, use a Modal
Do and don’t
Say what happened in the title and what to do next in the action, like “Payment failed” and “Try again”
Don’t use a vague title like “Error”, people can’t tell what went wrong or how to fix it