Skip to main content

Pill

Pills represent selected entities, filters or discrete information.

Pill is a versatile component that is used as group for selection or display of one or several items. Pills can be used as alternative to ckeckbox or radio group. They come in four types: Single item selection and Multiple items selction, Display, Draggable. Pills can support usage of the Icon, User Avatar and Logo .

View in StorybookExternal link icon

Behavior​

Pills are displayed inline, and can be wrapped in multiple horizontal lines.

Usage​

Single-item selection​

Single-item selection pills allow to make a single item selection out of variety of available options. They are a compact alternative to Radio Buttons.

Multiple-item selection​

Multiple-item selection pills allow to make multipe selections out of variety of options. They are a compact alterative to Checkboxes.

Display​

Display pills are used to show selected entities, categories or filters ( see Autocomplete ). These pills are removable and allow the option to clear by selecting the close icon.

Draggable​

Draggable pills allow users to change the order of items with drag-and-drop. These pills can be removed if needed.

Best practices​

  • Use pills to display selected entities.
  • Use Tags to display metadata properties.
  • Pills cant be used to display a single option.
  • Pills can't replace Toggles.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Selectable pill's visual hover state and adds a 2px ring.
  • For the Diplay removable pill, focus will trigger the close icon only.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

Refer ARIA Authoring Practices Guide: Checkbox Pattern and Radio Group pattern for Multiple and Single selection pills, as these components serve as alternatives to checkboxes and radio buttons.

For Display and Draggable removable pills, only the close icon is focusable. Standard keyboard interactions apply: the Tab key to focus on the icon and the Enter key to activate the focused element.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.