Chips

Chips are compact elements used to display information including inputs, attributes, or actions.

Chips allow users to enter information, make selections, filter content, or trigger actions, and chips should appear dynamically as a group of multiple interactive elements.

In the Delta Design System chips take the form of unordered lists.

Chip Examples

There are a couple of different chip options in the Delta Design System.

Basic Chips

Basic chips have no special features. They’re merely a graphical way to present a list.

  • Small
  • Medium
  • Large
html
<ul class="chips">
  <li><span>Small</span></li>
  <li><span>Medium</span></li>
  <li><span>Large</span></li>
</ul>

Toggle Chips

Toggle chips are used to turn multiple options on and off. To enable the toggle option, you’ll turn the chip into a <button>. This helps to make them keyboard accessible.

html
<ul class="chips">
  <li class="option-1"><button><svg class="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>Cats</button></li>
  <li class="option-2"><button><svg class="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>Dogs</button></li>
  <li class="option-3"><button><svg class="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>Birds</button></li>
  <li class="option-4"><button><svg class="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>Lizards</button></li>
</ul>
script
$('ul.chips li.option-1').click( function() {
  $('ul.chips li.option-1 svg.check').toggleClass('show');
});

Dismissible Chips

Dismissible chips are chips that can be removed from a list of chips. To enable these types of chips, add a .dismiss class to the parent <ul>. Also, we wrap the svg close icon in a <button> so that it is accessible by keyboard.

  • Email
  • Phone
  • Text
html
<ul class="chips dismiss">
  <li class="dismiss-1"><span>Email<button><svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg></button></span></li>
  <li class="dismiss-2"><span>Phone<button><svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg></button></span></li>
  <li class="dismiss-3"><span><button>Video<svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg></button></span></li>
  <li class="dismiss-4"><span>Text<button><svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg></button></span></li>
  <li class="dismiss-reset"><button>Reset</button></li>
</ul>
script
$('ul.chips li.dismiss-1 button').click( function() {
  $('ul.chips li.dismiss-1').addClass('dismissed');
});

Chip Icons

Add icons to chips by adding either a .icon-left or .icon-right and the appropriate svg code to a chip li.

  • Set Alarm
  • Bitcoin
html
<ul class="chips">
  <li class="icon-left"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22a9 9 0 1 1 0-18 9 9 0 0 1 0 18zm0-2a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm1-7h3v2h-5V8h2v5zM1.747 6.282l3.535-3.535 1.415 1.414L3.16 7.697 1.747 6.282zm16.97-3.535l3.536 3.535-1.414 1.415-3.536-3.536 1.415-1.414z"/></svg>Set Alarm</span></li>
  <li class="icon-right"><span>Bitcoin<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-4H8V8h3V6h2v2h1a2.5 2.5 0 0 1 2 4 2.5 2.5 0 0 1-2 4h-1v2h-2v-2zm-1-3v1h4a.5.5 0 1 0 0-1h-4zm0-3v1h4a.5.5 0 1 0 0-1h-4z"/></svg></span></li>
</ul>

Avatar Chips

Avatar chips are great for creating lists of users.

  • Avatar example imageJennifer Murphy
  • Avatar example imageLawrence Reynolds
  • Avatar example imageFelecia Carr
  • Avatar example imageKirk Gregory
html
<ul class="chips">
  <li class="avatar"><span><img src="../../assets/images/avatar-jennifer-murphy.jpg" alt="Avatar example image">Jennifer Murphy</span></li>
  <li class="avatar"><span><img src="../../assets/images/avatar-lawrence-reynolds.jpg" alt="Avatar example image">Lawrence Reynolds</span></li>
  <li class="avatar"><span><img src="../../assets/images/avatar-felecia-carr.jpg" alt="Avatar example image">Felecia Carr</span></li>
  <li class="avatar"><span><img src="../../assets/images/avatar-kirk-gregory.jpg" alt="Avatar example image">Kirk Gregory</span></li>
</ul>

Dismissible Icon and Avatar Chips

As of Version 2.2 you should be able to combine chips to make use of the dismiss feature with icon and avatar chips.

  • Set Alarm
  • Bitcoin
  • Avatar example imageRon Reyes
html
<ul class="chips dismiss">
  <li class="icon-left dismiss-5"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22a9 9 0 1 1 0-18 9 9 0 0 1 0 18zm0-2a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm1-7h3v2h-5V8h2v5zM1.747 6.282l3.535-3.535 1.415 1.414L3.16 7.697 1.747 6.282zm16.97-3.535l3.536 3.535-1.414 1.415-3.536-3.536 1.415-1.414z"/></svg>Set Alarm<button><svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg></button></span></li>
  <li class="icon-right dismiss-6"><span>Bitcoin<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-4H8V8h3V6h2v2h1a2.5 2.5 0 0 1 2 4 2.5 2.5 0 0 1-2 4h-1v2h-2v-2zm-1-3v1h4a.5.5 0 1 0 0-1h-4zm0-3v1h4a.5.5 0 1 0 0-1h-4z"/></svg><button><svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg></button></span></li>
  <li class="avatar dismiss-7"><span><img src="../../assets/images/avatar-ron-reyes.jpg" alt="Avatar example image">Ron Reyes<button><svg class="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg></button></span></li>
  <li class="dismiss-reset"><button>Reset</button></li>
</ul>