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: Chip, Badge

Salt package	@salt-ds/core
Available since	1.14.0

Code

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

Keyboard interactions

Pill

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.

Selectable pill group

Key	Function
`Space`	When focus is on the pill within a selectable group, this action toggles its selection state (selects or deselects the pill).
`Tab`	When focus is before the pill group, this action moves focus to the first pill in the group.
`Shift` + `Tab`	When focus is after the pill group, this action will shift focus to the last pill in the group.

Keyboard interactions

Pill

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.

Selectable pill group

Key	Function
`Space`	When focus is on the pill within a selectable group, this action toggles its selection state (selects or deselects the pill).
`Tab`	When focus is before the pill group, this action moves focus to the first pill in the group.
`Shift` + `Tab`	When focus is after the pill group, this action will shift focus to the last pill in the group.

Keyboard interactions

Pill

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.

Selectable pill group

Key	Function
`Space`	When focus is on the pill within a selectable group, this action toggles its selection state (selects or deselects the pill).
`Tab`	When focus is before the pill group, this action moves focus to the first pill in the group.
`Shift` + `Tab`	When focus is after the pill group, this action will shift focus to the last pill in the group.