Skip to main content
codeFork me on GitHub favoriteMade by Daemon

Chips

Chips represent complex entities in small blocks, such as a contact.

Usage

Chips can be used for various types of entities, including brief information, free form text, or short title. Chips may also contain icons or photos.

Chip Label CChip Label Chip ImageChip Label 
<span class="chip">Chip Label</span>
<span class="chip"><i class="chip-icon">C</i>Chip Label</span>
<span class="chip"><img alt="Chip Image" class="chip-img" src="/material/apple-touch-icon.png">Chip Label</span>

Chips can be deletable. A delete icon can be displayed if a chip is deletable.

Chip Label 
<div class="chip fade show" id="chipDismissible">
  Chip Label
  <button class="close" data-dismiss="alert" data-target="#chipDismissible" type="button"><i class="material-icons">cancel</i></button>
</div>

Chips can be interactive. Use <a>s or <button>s to create actionable chips with active, focus and hover states by adding .chip-action.

CChip Action Label Chip ImageChip Action Label 
<button class="chip chip-action" type="button">Chip Action Label</button>
<a class="chip chip-action" href="#"><i class="chip-icon">C</i>Chip Action Label</a>
<a class="chip chip-action" href="#"><img alt="Chip Image" class="chip-img" src="/material/apple-touch-icon.png">Chip Action Label</a>