Pill

Also known as

Tag, Chip, Badge
Available since
@salt-ds/core@1.14.0

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.

Density
Mode

You'll typically use the default pill for tagging purposes or to filter or change the page view. You can also use pills to trigger an action subject to change as a result of user input or a change in context, such as an autogenerated quick response to a message.

Display icons on the left of a default pill label using the icon prop to visually reinforce the theme or grouping of that pill and for quick recognition.

You can set a pill to a disabled state, with no resultant action when the user interacts with it.

The closable pill represents a value selected via another mechanism, and which the user can remove within the pill. It can appear on its own, such as alongside a complex filter panel, or within an input control such as ComboBox.