Badge

A badge is a label that indicates status or importance. Badges should provide quick recognition and are available in different styles for different use cases.

also known as Lozenge, Label, Stamp, Flag

an example of badge with text on a mobile screen

Usage guidelines

When to use
  • Labeling and bringing awareness to a specific element or feature (for example, noting when something is new or required)
When not to use
  • Providing feedback at the element level (for example, displaying error messages). Use inline text instead.
  • Requiring interaction from users, since Badges are always static and non-interactive

Best practices

For general Badge best practices, refer to the Badge web documentation.

  • Use only one or two words to describe Badge status
  • Badge must always be paired with the element that they're associated with
  • Avoid displaying multiple Badges in the same experience, since they label a state to an element

Accessibility

People use Android's accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessible design on Android

, Opens a new tab

Accessible development on Android
, Opens a new tab

Color

Badge text must be clear so that users can understand the status without relying only on Badge color.

Design tokens

Anatomy

Variants

Type

The badge is available in six styles. Each type has a semantic meaning and represents a sentiment.

  1. Info (default)
    Communicates helpful information or an important attribute. For example, 'New' or 'Help'.
  2. Success
    Indicates a constructive or successful state. For example, 'Available', 'Completed', 'Approved' or 'Added'.
  3. Warning
    Communicates cautionary or time-sensitive information to the user. For example, 'Busy', 'Missing' or 'Warning'.
  4. Error
    Informs the user of problems or errors that require potential action to correct. For example, 'Deleted' or 'Cancelled'.
  5. Neutral
    Indicates a general, non-critical status update. For example, 'Unavailable' or 'Not started'.
  6. Recommendation
    Highlights suggestions that'll improve the experience and achieve better results. For example, 'Recommended for you'.

Light wash / Dark wash

Badge with wash style may be used over media.

  1. Light wash
    The light wash badge should be used over media that's dark or uses a dark gradient overlay.
  2. Dark wash
    The dark wash badge should be used over media that's light or uses a light gradient overlay.

Dark mode

Writing

For writing best practices, refer to the Content standards.

Do
  • Use a single word to describe the status of an element. For example, "New" not "New post"
  • Where applicable, describe the status in past tense. For example, "archived" not "archive"
Don't
  • Use conflicting language with defined type sentiments. For example, the error badge shouldn't say "Complete"
Edit page on GitHub