Chips usage

You could use chips for something like tags or contacts.

Chip examples

There are a couple of chips. The normal (.chip), the deletable (.chip .chip-deletable), the contact (.chip .chip-contact) and the deletable contact (.chip .chip-deletable .chip-contact).

John Doe clear
John Doe
Chip contact example John Doe clear
Chip contact example John Doe
		
<div class="chip chip-deletable">
  <span>John Doe</span>
  <i class="material-icons chip-delete">clear</i>
</div>

<div class="chip">
  <span>John Doe</span>
</div>

<div class="chip chip-contact chip-deletable">
  <img class="left" src="" alt="">
  <span>John Doe</span>
  <i class="material-icons chip-delete">clear</i>
</div>

<div class="chip chip-contact">
  <img class="left" src="" alt="">
  <span>John Doe</span>
</div>
		
	

Settings

Variable Options Result
$chips-text Change to color or variable Changes the color of the text
$chips-text-hover Change to color or variable Changed the color of text when hovered and deletable
$chips-background Change to color or variable Changes the background color of a chip
$chips-background-hover Change to color or variable Changes the background color of a chip when hovered and deletable
$chips-delete-cross Change to color or variable Changes the delete cross color when deletable
$chips-delete-cross-hover Change to color or variable Changes the delete cross color when hovered and deletable
$chips-delete-background Change to color or variable Changes the delete cross background when deletable
$chips-delete-background-hover Change to color or variable Changes the delete cross background when hovered and deletable