Shipfaster: UI Components


Use badges to label, categorize, or organize items using keywords that describe them.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

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 of badge
  1. Label: Indicates badge name. Works best when short.
  2. 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.

All Products

Shipfaster UI: Figma UI Kit & Design System

Access 8,000+ Customizable components to supercharge your design workflow.

Pricing Icon
3,200+ of Downloads
Review Stars
3,200+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.