To help some information, labels, or errors stand out, we present them with badges. They can look a bit like buttons, but users can’t select them. They simply guide users to things they should pay attention to.

Usage

We use status badges to indicate status or items that might require the user’s attention. For example, we can use status badges to indicate:

  • An overdue or paid amount
  • An overdue or paid transaction
  • An incomplete item in a list or table

We also use status badges in confirmations, warnings, and some errors, each with a strong meaning. Be sure to use status badges consistently and only when we really need the users’ attention. Consistent, conservative use will help us make sure we don’t dilute the messages badges convey.

Appearance and behavior

When communicating status within a table or list, status badges appear as minimal bars to the left that draw attention without overpowering the associated content.

We use the teardrop-shaped status badge to point to a transaction or dollar amount that requires attention (example: an overdue invoice). We might also have a brief text label with such a badge, such as “Overdue” or “Paid.”

We use the round status badges in end-of-flow confirmations, warnings, and errors.

Examples

New feature

End-of-flow success validation with next steps

Real-time success validation (inline confirmation)

Page-level warning (title and content)

Desktop data loss alert

 

Demo

Launch Preview
x
px wide

  • Was this Helpful?
  •