Components

Pill

Small labels that help qualify information.

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

Sizes

Xsmall

<PillV2 size="xsmall">
  Label
</PillV2>

Small

<PillV2 size="small">
  Label
</PillV2>

Medium

<PillV2 size="medium">
  Label
</PillV2>

Large

<PillV2 size="large">
  Label
</PillV2>

Xlarge

<PillV2 size="xlarge">
  Label
</PillV2>

Themes

Default

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

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
size
The size of the component when rendered.

Type
'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
Default
'small'
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