Chips are compact UI elements used to display small blocks of information, such as tags, categories, or user selections. They can be clickable, removable, or contain avatars & icons. and chips are quasi-navigation components which can highly improve website clarity and increase user experience.

Button Chip

<button class="chip display--inline-block position--relative">
  <span class="chip__value secondary-light-color secondary-alpha-lighter-background-color display--inline-block">Lorem Ipsum</span>
</button>

Button Chip With Left Icon

<button class="chip display--inline-block position--relative">
 <span class="chip__value secondary-light-color secondary-alpha-lighter-background-color display--inline-block">
 <span class="chip__icon--left blueprint-icon icon-bp_1_close"></span> Lorem Ipsum</span>
</button>

Button Chip With Right Icon

<button class="chip display--inline-block position--relative">
  <span class="chip__value secondary-light-color secondary-alpha-lighter-background-color display--inline-block">
  Lorem Ipsum <span class="chip__icon--right blueprint-icon icon-bp_1_close"></span></span>
</button>