Components

Pill

Small labels that help qualify information.

PillV2 is a read-only status or category label. Pass the text content as children.

PillV2 keeps the v1 Pill API — children, icon, and dataTestId all behave the same — so a migration is a straight swap: change the import and rename color to theme. v1’s eight colors collapse into the four semantic themes:

v1 color	v2 theme
`green`	`success`
`yellow`, `medium-yellow`	`warning`
`red`, `dark-red`	`alert`
`blue`, `purple`, `indigo`	`default` (grey)

A v1 pill with no color already rendered grey, so it maps to default — which is what PillV2 uses when theme is omitted. iconRight is new in v2; v1 had no equivalent.

Default

<PillV2>
  Label
</PillV2>

Themes

Alert

<PillV2 theme="alert">
  Label
</PillV2>

Warning

<PillV2 theme="warning">
  Label
</PillV2>

Success

<PillV2 theme="success">
  Label
</PillV2>

Icons

Use icon for a left icon and iconRight for a right icon. Icons should be presentational unless they add meaning that is not already expressed by the label.

Left icon

<PillV2 icon={<ContentModifierLightningTiny />}>
  Fast response
</PillV2>

Right icon

<PillV2 iconRight={<ContentModifierTrophyTiny />}>
  In high demand
</PillV2>

Both icons

<PillV2
  icon={<ContentModifierLightningTiny />}
  iconRight={<ContentModifierTrophyTiny />}
>
  Featured
</PillV2>

Multiple

<div>
  <span className="mr2">
    <PillV2 theme="success">
      Highly rated
    </PillV2>
  </span>
  <span>
    <PillV2 icon={<ContentModifierLightningTiny />}>
      Fast response
    </PillV2>
  </span>
</div>

Props

PillV2

children
required
Text content to render.

Type
string
icon
"Tiny" size icon to render before the label.

Type
React.ReactNode
iconRight
"Tiny" size icon to render after the label.

Type
React.ReactNode
theme
Determines the background, text, and icon color of the component.

Type
'default' | 'success' | 'warning' | 'alert'
Default
'default'
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string