No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Pills


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

          

          
  
    Pill Label
  
  

          

          

            

              
Code

              
            

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

          

        

    


To create a pill, apply the .nds-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 nds-pill_link needs to be added to the existing <span> with the classname of nds-pill. You need an <a> inside of the span with the nds-pill_link class. The <a> will get the classname of nds-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 nds-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 .nds-pill__label. That icon or image should receive the class .nds-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 .nds-pill__label. That icon should receive the class .nds-pill__remove.


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



      
Overview of CSS Classes

      
  

    

      Selector
      
        .nds-pill
      
    

    

      Summary
      Initializes pill
    

    

      Restrict
      
        span 
      
    

  

  

  

    

      Selector
      
        .nds-pill_bare
      
    

    

      Summary
      Modifier that removes border and background from a pill
    

    

      Restrict
      
        .nds-pill 
      
    

  

  

  

    

      Selector
      
        .nds-pill_container
      
    

    

      Summary
      Container to hold pill(s) with borders
    

    

      Restrict
      
        div 
      
    

  

  

  

    

      Selector
      
        .nds-pill_container_bare
      
    

    

      Summary
      Container to hold pill(s) with no borders
    

    

      Restrict
      
        .nds-pill_container 
      
    

  

  

  

    

      Selector
      
        .nds-pill__label
      
    

    

      Summary
      Line of text inside a pill
    

    

      Restrict
      
        .nds-pill a, .nds-pill span
      
    

  

  

  

    

      Selector
      
        .nds-pill__icon_container
      
    

    

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

    

      Restrict
      
        .nds-pill span
      
    

  

  

  

    

      Selector
      
        .nds-pill__remove
      
    

    

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

    

      Restrict
      
        .nds-pill button, .nds-pill span
      
    

  

  

  

    

      Selector
      
        .nds-pill_link
      
    

    

      Summary
      Creates a pill with a hyperlink
    

    

      Restrict
      
        .nds-pill 
      
    

  

  

  

    

      Selector
      
        .nds-pill__action
      
    

    

      Summary
      Actionable element inside of pill with hyperlink
    

    

      Restrict
      
        .nds-pill_link a
      
    

  

  

  

    

      Selector
      
        .nds-has-error
      
    

    

      Summary
      Pill error styles
    

    

      Restrict
      
        .nds-pill