Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
Generally, there is no need to build landing pages to match the breadcrumbs.
Ensure colors are accessible
Do
Use the Figma component settings (or alias tokens) to ensure badge color combinations are accessible.
Don't
Don’t use non-accessible color combinations.
Use preset semantic colors
Do
Use the predefined color styles (or tokens) for badges.
Don't
Avoid altering the predefined colors styles.
Use consistent styles from the semantic palette
Do
Use the same style for all badges in the same layout.
Don't
Avoid mixing bold and subtle styles.
Avoid making badges interactive
Do
Use badges for informational purposes.
Don't
Avoid using badges as interactive elements. Instead use tags for interaction purposes.
Avoid using icon-only badges
Do
Include text labels even when also using an icon.
Don't
Avoid using only icons on a badge as the user will lose context.