Badge & Pill

View on GitHub

Introduction

The Badge and Pill components are labels with a background color.

  • Badge: Used for state and text. Slightly rounded corners.
  • Pill: Used only for numbers. Circular.

Badge

The Badge component should only be used for state and general text labels. Not for numbers.

Success
<Badge color="green">Success</Badge>
code Hide code

Color options

Solid badges

neutralgreenblueredorangepurpleyellowteal

Subtle badges

neutralgreenblueredorangepurpleyellowteal

When to use what badge

Success
Success
Operational, available, done, approved, added
Removed
Removed
Errors, declined, failed, removed, critical
In progress
In progress
In progress, open, modified
Trial
Trial
Trial, new, information, help
Moved
Moved
Busy, blocked, missing, warning
Beta
Beta
Betag

Badge Props

This component composes ../typography

colorstring = 'neutral'
The color used for the badge. When the value is `automatic`, use the hash function to determine the color.
isInteractivebool = false
Whether or not to apply hover/focus/active styles
themeobjectrequired
Theme provided by ThemeProvider.
isSolid = false

Pill

The Pill component should only be used for numbers.

024
<Pane>
  <Pill display="inline-flex" margin={8}>0</Pill>
  <Pill display="inline-flex" margin={8} color="red" isSolid>24</Pill>
</Pane>
code Hide code

Pill Props

This component composes Badge