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 Default Chip Variant

<button class="chip display--inline-block position--relative variant-1">
   <span class="chip__icon--before blueprint-icon icon-duration"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</button>

Button Default Chip Complete

<button class="chip display--inline-block position--relative variant-1">
   <span class="chip__icon--before blueprint-icon icon-success"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</button>

Button Default Chip Incomplete

<button class="chip display--inline-block position--relative variant-1 status-incomplete">
   <span class="chip__icon--before blueprint-icon icon-info"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</button>

Button Default Chip Active

<button class="chip display--inline-block position--relative variant-1 status-active">
   <span class="chip__icon--before blueprint-icon icon-circle"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</button>

Button Default Chip Active Complete

<button class="chip display--inline-block position--relative variant-1 status-active">
   <span class="chip__icon--before blueprint-icon icon-success"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</button>

Button Default Chip Active Incomplete

<button class="chip display--inline-block position--relative variant-1 status-active">
   <span class="chip__icon--before blueprint-icon icon-info"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</button>

Button Default Chip Locked

<button class="chip display--inline-block position--relative variant-1 status-locked">
   <span class="chip__icon--before blueprint-icon icon-locked"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</button>

Button Default Chip Locked Active

<button class="chip display--inline-block position--relative variant-1 status-locked-active">
   <span class="chip__icon--before blueprint-icon icon-locked"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</button>