Badge is a label that indicates status or importance. Badges should provide quick recognition.

also known as Lozenge, Label, Stamp, Flag






Component props

Text displayed inside of the Badge. Sentence case is preferred.

"middle" | "top"

Badge position relative to its parent element. See the positioning variant to learn more.

  accessibilityLabel?: string,
  idealDirection?: "up" | "right" | "down" | "left",
  text: string,
  zIndex?: Indexable,

Experimental prop, do not use. Adds a Tooltip on hover/focus of the Badge. To convey the interaction, it also displays an information Icon. See the type variant to learn more.

| "error"
| "warning"
| "success"
| "neutral"
| "recommendation"
| "darkWash"
| "lightWash"

Determines the style of the badge. See the type variant to learn more.

Usage guidelines

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

Best practices


Align the badge to the top of large accompanying text (anything larger than 16px). Center align for standard size text.


Use colored badges over media. Instead use the dark or light wash.


Use established color patterns so users can quickly scan and identify sentiment. However, the badge text should always clearly indicate the sentiment, so color is not the sole indicator of information.


Use complex or verbose language. Instead use a single, scannable word. For example: 'New'.


The badge text is read out by assistive technologies like screen readers so all users can access the meaning of the badge in context. Text should demonstrate the sentiment clearly enough to be understood immediately without relying on color alone.


Be sure to localize the text prop. Note that localization can lengthen text by 20 to 30 percent.



Badge is available in five styles. Each type represents a messaging 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 a suggestion that will improve the experience and achieve better results. For example, 'Recommended for you'.

Over media

Badge may be used over media using two wash styles.

  1. Over media - Light wash
    The light wash badge should be used over media that is dark or utilizes a dark gradient overlay.

  2. Over media - Dark wash
    The dark wash badge should be used over media that is light or utilizes a light gradient overlay.


By default, Badge is rendered inline within the parent element. However, the position prop can be used to adjust the alignment. Badges should align to the top of large accompanying text.

Within other components

Components like Module and Dropdown have Badges built into the component through props, so it will not be necessary to add the component yourself.


  • 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.”
  • Use conflicting language with defined type sentiments. For example, the error badge should not say “Complete.”

Component quality checklist

Component quality checklist
Quality item
Status description
Figma Library
Partially ready
Component is live in Figma, however may not be available for all platforms.
Responsive Web
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.

Status is a graphic indicator of an element’s state.

Tooltip is a floating text label that succinctly describes the function of an interactive element.