Pill

Pill is a small visual element that can contain descriptive text and an icon. You can use pills to label, filter or sort interactive content, trigger actions or make selections.

Also known as: Tag, Chip, Badge

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Keyboard interactions

Key	Function
`Enter` / `Space`	When focus is on the pill, this action activates it.
`Tab`	Tab sets focus on the entire pill. When the pill has focus, Tab moves focus out of the pill to next component in tab order.
`Shift` + `Tab`	When the pill has focus, this action moves focus out of the pill to the previous component in the tab order.

Keyboard interactions

Key	Function
`Enter` / `Space`	When focus is on the pill, this action activates it.
`Tab`	Tab sets focus on the entire pill. When the pill has focus, Tab moves focus out of the pill to next component in tab order.
`Shift` + `Tab`	When the pill has focus, this action moves focus out of the pill to the previous component in the tab order.

Keyboard interactions

Key	Function
`Enter` / `Space`	When focus is on the pill, this action activates it.
`Tab`	Tab sets focus on the entire pill. When the pill has focus, Tab moves focus out of the pill to next component in tab order.
`Shift` + `Tab`	When the pill has focus, this action moves focus out of the pill to the previous component in the tab order.