About Pills#

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

Depending on your context, you will either need a base pill (linked or unlinked), or a pill option inside of a listbox. Note that a linked pill should not be used as 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 class name of slds-pill. You need an <a> inside of the span with the slds-pill_link class. The <a> will get the class name of slds-pill__action. This will treat the interactions differently from an unlinked pill option inside of a listbox.

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

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

Mobile#

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, pills will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Base#

<span class="slds-pill slds-pill_link">
  <a href="#" class="slds-pill__action" title="Full pill label verbiage mirrored here">
    <span class="slds-pill__label">Pill Label</span>
  </a>

Examples#

With Icon#

<span class="slds-pill slds-pill_link">
  <span class="slds-pill__icon_container">
    <span class="slds-icon_container slds-icon-standard-account" title="Account">
      <svg class="slds-icon" aria-hidden="true">

With Avatar#

Pill LabelRemove

• Show Code

<span class="slds-pill slds-pill_link">
  <span class="slds-pill__icon_container">
    <span class="slds-avatar slds-avatar_circle" title="User avatar">
      <img alt="Person name" src="/assets/images/avatar2.jpg" title="User avatar" />

Pill with Container#

<div class="slds-pill_container">
  <span class="slds-pill slds-pill_link">
    <a href="#" class="slds-pill__action" title="Full pill label verbiage mirrored here">
      <span class="slds-pill__label">Pill Label</span>

States#

Error#

<span class="slds-pill slds-pill_link slds-has-error">
  <span class="slds-pill__icon_container">
    <span class="slds-icon_container" title="Error">
      <svg class="slds-icon slds-icon-text-error" aria-hidden="true">

Truncated#

The pills component will respect the width of its parent and truncate if necessary.

<div class="slds-pill_container">
  <span class="slds-pill slds-pill_link">
    <a href="#" class="slds-pill__action" title="Pill label that is longer than the area that contains it">
      <span class="slds-pill__label">Pill label that is longer than the area that contains it</span>

Showing the full text of a truncated pill as a tooltip.

<span class="slds-pill" aria-selected="true">
  <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:-45px;left:-2px">
    <div class="slds-popover__body">Pill label that is longer than the area that contains it</div>
  </div>

Listbox Of Pill Options#

<div class="slds-pill_container">
  <ul class="slds-listbox slds-listbox_horizontal" aria-label="Selected Options:" aria-describedby="listbox-pill-default">
    <li class="slds-listbox-item">
      <span class="slds-pill">

A Listbox of Pills is a way to display a list of selected options when performing user input, usually from a multi-select Combobox, Lookup or Picklist.

Note that we can use a linked or unlinked pill as a pill item inside of a listbox

Accessibility#

Interaction requirements

• Only 1 focused Pill per set of Pills
• The remove button is a focusable element and can be clickable.

Keyboard navigation

• The first pill in the list will be take user focus initially, when tabbed to
• Right arrow key will move focus to the next pill in the list
• Left arrow key will move focus to the previous pill in the list
• Left arrow key when on the first pill should cycle user focus to the last pill
• Right arrow key when on the last pill should cycle user focus to the first pill
• On removing of the pill, the focus should then be placed on the nearest pill
  • When on the last pill, place user focus on the previous pill
  • When on the first pill, place user focus on the next pill
  • When on the only pill, place user focus on the listbox or any input element the pill might be associated with

Examples#

With Icon#

<div class="slds-pill_container">
  <ul class="slds-listbox slds-listbox_horizontal" aria-label="Selected Options:" aria-describedby="listbox-pill-with-icon">
    <li class="slds-listbox-item">
      <span class="slds-pill">

With Avatar#

<div class="slds-pill_container">
  <ul class="slds-listbox slds-listbox_horizontal" aria-label="Selected Options:" aria-describedby="listbox-pill-with-avatar">
    <li class="slds-listbox-item">
      <span class="slds-pill">

Layout#

Bare#

<div class="slds-pill_container">
  <ul class="slds-listbox slds-listbox_horizontal" aria-label="Selected Options:" aria-describedby="listbox-pills-bare">
    <li class="slds-listbox-item">
      <span class="slds-pill slds-pill_bare">

Styling Hooks Overview#