Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography

Layout
Modals
Modals / Confirmation
Panels
Tabs

Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields

Status & Feedback
Badges
Progress Indicators
Tooltips

Badges are a visual indicator used to inform the user of a value or status applied to an element. 

◢

Overview 

Badges are used to call attention to an area of the user interface.

Badges are read-only and cannot be used to trigger actions.

Badges are based on sentiment. (Positive and Negative feelings) 
    - Positive can represent a successful connection or a new feature.
    - Negative can represent an unsuccessful connection or deprecated feature

USE CASES:

Display connection status of payment provider.

To inform the user about an opportunity to opt-in to an open beta.

To inform the user about a new feature in the context of an app’s navigation.

Anatomy

Examples