Components
Feedback
Telling people what happened without stealing their focus. Colour always comes with an icon or words.
An inline message for information, success, a warning or an error, with an optional title and actions.
Information
A neutral message with supporting text.
Success
Confirms that something worked.
Warning
Something needs attention soon. Alerts can carry an action.
Error
Says what went wrong and how to fix it.
Short messages in a corner that go away by themselves, from one function or from markup, announced to screen readers without moving focus.
Undo pressed: no
How far through something is, or that it's under way. A styled native progress element, so the value is real and announced.
Placeholders shaped like the content that's on its way, so the page doesn't jump when it arrives.
What a list or view shows before there's anything in it, saying why it's empty and what to do next.
Nothing here yet
Supporting text says what will appear here and how to start.
Planned for this page
- Progress ring
- Spinner
- Banner