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.
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:
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
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.”
End-of-flow success validation with next steps
Real-time success validation (inline confirmation)
Page-level warning (title and content)
Desktop data loss alert