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.
Communicates helpful information or an important attribute. For example, 'New' or 'Help'.
Indicates a constructive or successful state. For example, 'Available', 'Completed', 'Approved' or 'Added'.
Communicates cautionary or time-sensitive information to the user. For example, 'Busy', 'Missing' or 'Warning'.
Informs the user of problems or errors that require potential action to correct. For example, 'Deleted' or 'Cancelled'.
Indicates a general, non-critical status update. For example, 'Unavailable' or 'Not started'.
Badge may be used over media using two wash styles.
Over media - Light wash
The light wash badge should be used over media that is dark or utilizes a dark gradient overlay.
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.
Component quality checklist
Component is live in Figma, however may not be available for all platforms.
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.