Components

Pills

Within a form control, a pill represents an existing item in a database, as opposed to user-generated freeform text.

BaseBase › DefaultBase › With iconBase › With portraitBase › UnlinkedBase › TruncatedBase › Pill with ContainerBase › ErrorBasedev ready

Preview

Code

<span class="slds-pill"><a href="javascript:void(0);" class="slds-pill__label" title="Full pill label verbiage mirrored here">Pill Label</a>
  <button class="slds-button slds-button--icon slds-pill__remove" title="Remove">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>
    <span class="slds-assistive-text">Remove</span>
  </button>
</span>

Component Overview

To create a pill, apply the .slds-pill class on a span. Inside, place either a span or an a with the .slds-pill__label class around the text.

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.

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

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-pill
Applied to:

<span>

Outcome:

Initializes pill

Required:

Required

Comments:

--

.slds-pill__label
Applied to:

<span> or <a>

Outcome:

Initializes pill label

Required:

Required

Comments:

--

.slds-pill__icon
Applied to:

<svg class="slds-icon"> or .slds-avatar

Outcome:

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

Required:

Required

Comments:

--

.slds-pill__remove
Applied to:

.slds-button

Outcome:

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

Required:

Required

Comments:

--

.slds-pill_container
Applied to:

<div>

Outcome:

Container to hold pill(s) with borders

Required:

Required

Comments:

--

.slds-pill_container--bare
Applied to:

<div>

Outcome:

Container to hold pill(s) with no borders

Required:

No, optional element or modifier

Comments:

--

.slds-pill--bare
Applied to:

.slds-pill

Outcome:

Modifier that removes border and background from a pill

Required:

No, optional element or modifier

Comments:

--

.slds-pill-container
Deprecated
Applied to:

Outcome:

Container to hold pills(s)

Required:

No, optional element or modifier

Comments:

--