Pills
- HTML/CSS:Dev Ready
- Layout:Desktop Only
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-pill |
|---|---|
| Summary | Initializes pill |
| Support | dev-ready |
| Restrict | span |
| Variant | True |
| Selector | .slds-pill_bare |
|---|---|
| Summary | Modifier that removes border and background from a pill |
| Restrict | .slds-pill |
| Modifier | True |
| 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 |
| Modifier | True |
| Selector | .slds-listbox [role="listbox"] |
|---|---|
| Summary | A listbox of Pills is a way to display a list of selected options when performing user input |
| Support | dev-ready |
| Restrict | .slds-pill |
| Variant | True |