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.
| Salt package | @salt-ds/core |
|---|---|
| Available since | 1.14.0 |
Pills are often used for quick actions such as choosing an auto-generated response to a message or reserving a seat in a room.
A pill can be indicated as closable by adding a close icon on the right side of the pill. This type of pill is often used to represent a value that the user (or system) has selected, and which the user is able to remove from the selection. It can appear on its own, such as alongside a complex filter panel, or within an input control such as ComboBox.
Pills can be grouped together using the PillGroup component.
Grouped pills can be selectable. Selectable pills can be toggled on or off to represent a choice or selection. A visible checkbox provides the user with a clear visual cue that the accompanying pill is selectable.
- We recommend wrapping Selectable pill groups in a
FormFieldcomponent to provide a visible label and optionally help text. - When selectable pill groups don't have a visible label, ensure the group has an accessible name by using
aria-labeloraria-labelledby.
A group of selectable pills can wrap for smaller screens or to save space when there are many items.
Visually reinforce the theme or action of the pill by using icons.
You can set a pill to a disabled state, with no resultant action when the user interacts with it.
Pills are often used for quick actions such as choosing an auto-generated response to a message or reserving a seat in a room.
A pill can be indicated as closable by adding a close icon on the right side of the pill. This type of pill is often used to represent a value that the user (or system) has selected, and which the user is able to remove from the selection. It can appear on its own, such as alongside a complex filter panel, or within an input control such as ComboBox.
Pills can be grouped together using the PillGroup component.
Grouped pills can be selectable. Selectable pills can be toggled on or off to represent a choice or selection. A visible checkbox provides the user with a clear visual cue that the accompanying pill is selectable.
- We recommend wrapping Selectable pill groups in a
FormFieldcomponent to provide a visible label and optionally help text. - When selectable pill groups don't have a visible label, ensure the group has an accessible name by using
aria-labeloraria-labelledby.
A group of selectable pills can wrap for smaller screens or to save space when there are many items.
Visually reinforce the theme or action of the pill by using icons.
You can set a pill to a disabled state, with no resultant action when the user interacts with it.
Pills are often used for quick actions such as choosing an auto-generated response to a message or reserving a seat in a room.
A pill can be indicated as closable by adding a close icon on the right side of the pill. This type of pill is often used to represent a value that the user (or system) has selected, and which the user is able to remove from the selection. It can appear on its own, such as alongside a complex filter panel, or within an input control such as ComboBox.
Pills can be grouped together using the PillGroup component.
Grouped pills can be selectable. Selectable pills can be toggled on or off to represent a choice or selection. A visible checkbox provides the user with a clear visual cue that the accompanying pill is selectable.
- We recommend wrapping Selectable pill groups in a
FormFieldcomponent to provide a visible label and optionally help text. - When selectable pill groups don't have a visible label, ensure the group has an accessible name by using
aria-labeloraria-labelledby.
A group of selectable pills can wrap for smaller screens or to save space when there are many items.
Visually reinforce the theme or action of the pill by using icons.
You can set a pill to a disabled state, with no resultant action when the user interacts with it.