2.7.1 #Components.chip.clear Chip with clear icon

Toggle example guides Toggle HTML markup

Chip componenent with clear icon to remove the tags

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
Select NPS Question
How likely are you to recommend us to a friend How likely are you to recommend us to a friend includes 1 - 5
Platform includes Windows, Mac OSX, Android, iOS
Platform includes Windows, Mac OSX, Android, iOS, Firefox OS, Chromium
.sb-chip--placeholder
chip placeholder state
Select NPS Question
How likely are you to recommend us to a friend How likely are you to recommend us to a friend includes 1 - 5
Platform includes Windows, Mac OSX, Android, iOS
Platform includes Windows, Mac OSX, Android, iOS, Firefox OS, Chromium
.sb-chip--active
chip active state when user editing Chips
Select NPS Question
How likely are you to recommend us to a friend How likely are you to recommend us to a friend includes 1 - 5
Platform includes Windows, Mac OSX, Android, iOS
Platform includes Windows, Mac OSX, Android, iOS, Firefox OS, Chromium
.sb-chip--error
chip error state
Select NPS Question
How likely are you to recommend us to a friend How likely are you to recommend us to a friend includes 1 - 5
Platform includes Windows, Mac OSX, Android, iOS
Platform includes Windows, Mac OSX, Android, iOS, Firefox OS, Chromium
Markup 
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="Select NPS Question" role="button">
   <div class="sb-chip__content">
     Select NPS Question
   </div>
   <button type="button" class="sb-btn sb-btn--subtle" role="button" aria-label="clear">
     <svg class="sb-icon sb-icon--xs" viewBox="0 0 17 17">
       <path d="M10.784 8.727l5.641 5.641a.75.75 0 0 1 0 1.06l-.996.997a.75.75 0 0 1-1.06 0l-5.642-5.64-5.64 5.64a.75.75 0 0 1-1.061 0l-.997-.996a.75.75 0 0 1 0-1.06L6.67 8.726l-5.64-5.64a.75.75 0 0 1 0-1.061l.996-.997a.75.75 0 0 1 1.06 0L8.727 6.67l5.641-5.64a.75.75 0 0 1 1.06 0l.997.996a.75.75 0 0 1 0 1.06l-5.64 5.641z"/>
     </svg>
   </button>
</div>
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="How likely are you to recommend us to a friend How likely are you to recommend us to a friend" role="button">
   <div class="sb-chip__content">
     <div class="sb-flex sb-flex-row">
       <span class="sb-chip__text">How likely are you to recommend us to a friend How likely are you to recommend us to a friend</span>
       <span class="sb-chip__text">includes</span>
       <span class="sb-chip__text">1 - 5</span>
     </div>
   </div>
   <button type="button" class="sb-btn sb-btn--subtle" role="button" aria-label="clear">
     <svg class="sb-icon sb-icon--xs" viewBox="0 0 17 17">
       <path d="M10.784 8.727l5.641 5.641a.75.75 0 0 1 0 1.06l-.996.997a.75.75 0 0 1-1.06 0l-5.642-5.64-5.64 5.64a.75.75 0 0 1-1.061 0l-.997-.996a.75.75 0 0 1 0-1.06L6.67 8.726l-5.64-5.64a.75.75 0 0 1 0-1.061l.996-.997a.75.75 0 0 1 1.06 0L8.727 6.67l5.641-5.64a.75.75 0 0 1 1.06 0l.997.996a.75.75 0 0 1 0 1.06l-5.64 5.641z"/>
     </svg>
   </button>
</div>
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" role="button" aria-label="Platform">
   <div class="sb-chip__content">
     <div class="sb-flex sb-flex-row">
       <span class="sb-chip__text">Platform</span>
       <span class="sb-chip__text">includes</span>
       <span class="sb-chip__text">Windows, Mac OSX, Android, iOS</span>
     </div>
   </div>
   <button type="button" class="sb-btn sb-btn--subtle" role="button" aria-label="clear">
     <svg class="sb-icon sb-icon--xs" viewBox="0 0 17 17">
       <path d="M10.784 8.727l5.641 5.641a.75.75 0 0 1 0 1.06l-.996.997a.75.75 0 0 1-1.06 0l-5.642-5.64-5.64 5.64a.75.75 0 0 1-1.061 0l-.997-.996a.75.75 0 0 1 0-1.06L6.67 8.726l-5.64-5.64a.75.75 0 0 1 0-1.061l.996-.997a.75.75 0 0 1 1.06 0L8.727 6.67l5.641-5.64a.75.75 0 0 1 1.06 0l.997.996a.75.75 0 0 1 0 1.06l-5.64 5.641z"/>
     </svg>
   </button>
</div>
<div class="sb-chip sb-margin-bottom-xs sb-margin-right-xs [modifier class]" tabindex="0" aria-label="Platform" role="button">
   <div class="sb-chip__content">
     <div class="sb-flex sb-flex-row">
       <span class="sb-chip__text">Platform</span>
       <span class="sb-chip__text">includes</span>
       <span class="sb-chip__text">Windows, Mac OSX, Android, iOS, Firefox OS, Chromium</span>
     </div>
   </div>
   <button type="button" class="sb-btn sb-btn--subtle" role="button" aria-label="clear">
     <svg class="sb-icon sb-icon--xs" viewBox="0 0 17 17">
       <path d="M10.784 8.727l5.641 5.641a.75.75 0 0 1 0 1.06l-.996.997a.75.75 0 0 1-1.06 0l-5.642-5.64-5.64 5.64a.75.75 0 0 1-1.061 0l-.997-.996a.75.75 0 0 1 0-1.06L6.67 8.726l-5.64-5.64a.75.75 0 0 1 0-1.061l.996-.997a.75.75 0 0 1 1.06 0L8.727 6.67l5.641-5.64a.75.75 0 0 1 1.06 0l.997.996a.75.75 0 0 1 0 1.06l-5.64 5.641z"/>
     </svg>
   </button>
</div>
Source: components/_chip.scss, line 174