Pills

Pills

A pill represents an object that can be viewed with or without an icon

Base

Preview

About Pills

To create a pill, apply the .slds-pill class on a <span>.

Depending on your context, you will either need a linked pill or a pill option inside of a listbox.

For linked pills, a modifier class of slds-pill_link needs to be added to the existing <span> with the classname of slds-pill. You need an <a> inside of the span with the slds-pill_link class. The <a> will get the classname of slds-pill__action. This will treat the interactions differently from an unlinked pill option inside of a listbox.

For both linked pills and unlinked pill options, a <span> with the classname of slds-pill__label should contain the string of text describing the pill object.

Note, that a linked pill should not be used as a pill option inside of a listbox.

Additionally, a pill can have an icon or image that sits to the left-hand side of the .slds-pill__label. That icon or image should receive the class .slds-pill__icon_container.

You may also want the functionality to remove the pill as a selection. An "X" icon is normally used and will sit to the right-hand side of the .slds-pill__label. That icon should receive the class .slds-pill__remove.

A .slds-pill_container can be used as a visual container for multiple pill(s).


Overview of CSS Classes

Selector.slds-pill
Summary

Initializes pill

Supportdev-ready
Restrictspan
VariantTrue
Selector.slds-pill_bare
Summary

Modifier that removes border and background from a pill

Restrict.slds-pill
ModifierTrue
Selector.slds-pill__label
Summary

Line of text inside a pill

Restrict.slds-pill a, .slds-pill span
Selector.slds-pill__icon_container
Summary

Initializes pill icon or avatar that sits to the left of the label

Restrict.slds-pill span
Selector.slds-pill__remove
Summary

Initializes remove icon in pill that sits to the right of the label

Restrict.slds-pill button, .slds-pill span
Selector.slds-pill_link
Summary

Creates a pill with a hyperlink

Restrict.slds-pill
Selector.slds-pill__action
Summary

Actionable element inside of pill with hyperlink

Restrict.slds-pill_link a
Selector.slds-has-error
Summary

Pill error styles

Restrict.slds-pill
ModifierTrue
Selector.slds-listbox [role="listbox"]
Summary

A listbox of Pills is a way to display a list of selected options when performing user input

Restrict.slds-pill
VariantTrue