Badge Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Badge

Overview

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

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).