Usage

Pill has two variants: outline – off state and solid – on state. Each variant has color variants: neutral, accent, and danger. There are also two available sizes: small and medium.

Variant – On (solid)

A default pill in its “on” position (after selection). Use when a selection can be turned on and off using a pill.

Variant – Off (outline)

A default pill in its “off” position (prior to selection). Use when a selection can be turned on and off using a pill. Note: all color variants look similar in their resting state.

Secondary Action / Icon Keys

Since a Pill renders a Button or Anchor tag, focusing a pill and hitting Enter will trigger the main action associated with its onClick callback. In many cases, we allow a secondary action such as removing a pill from a group. This is often designated with an "X" icon or similar.

Note: The icon itself is NOT focusable. Instead, when a user is focused on a Pill, the secondary action can be triggered with keys listed in the iconKeys prop. By default, this is ['Delete', 'Backspace'], but other keys can be specified, except for Space or Enter

Props

Pill
System Props

  • COMMON
  • TYPOGRAPHY
  • BORDER
  • LAYOUT
  • POSITION
  • FLEX
  • GRID
  • Learn More
NameTypeDescription

Accessibility

  • Pill composes Button
  • It is possible to render a Pill with no action, but with an icon that is clickable. In most cases, Delete will trigger this nested action (rendered as svg), but it is not focusable by keyboard by design.