Pills

Pills

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

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Base

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).


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