kit

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.

Tier 1 · CSS only Status message preview

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

Tier 2 · behaviour Status message beta

How far through something is, or that it's under way. A styled native progress element, so the value is real and announced.

72%72%
68 / 10068%
waiting
Tier 1 · CSS only Native progress preview

Placeholders shaped like the content that's on its way, so the page doesn't jump when it arrives.

Loading…

Tier 1 · CSS only Decorative placeholder preview

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.

Tier 1 · CSS only Content preview

Planned for this page

  • Progress ring
  • Spinner
  • Banner