Overview
Badge
Use badges to label, categorize, or organize items using keywords that describe them.
Overview
Multiple or single tags can be used to categorize items. Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
When to use
- Badges are generally used to highlight a numerical characteristic or mark an item.
- Use badges when content is mapped to multiple categories, and the user needs a way to differentiate between them.
- Badges can also be used as a method of filtering data, to show only items within that particular category.
Anatomy
- Label: Indicates badge name. Works best when short.
- Supporting Icons: For showing additional visual support.
Best Practices
- Keep labels short and sweet!
- With very less space to convey message, use icons to add visual weight.
- Use icons on the right only when that icon relates to there being further explanation of the label (such as to signal there’s a tooltip).
Recommended resources
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more