Chip

Chips are labels or small blocks of information, and they're great for tags, users, filters, faceted search and more.

Fish Chips Peas
<span class="chip">Fish</span>
<span class="chip">Chips</span>
<span class="chip">Peas</span>

Image Chip

Chips can be used with images. Just add the .has-image class along with a size modifier like is-medium, and add in an image component.

User photo John Smith
<span class="chip has-image is-medium">
	<span class="image is-32x32">
		<img src="/path/to/image.jpg" alt="User photo">
	</span>
	<span>John Smith</span>
</span>

Tag

You can use chips as tags with remove buttons.

Fish Chips Peas
<span class="chip">
	Fish
	<button class="remove is-small"></button>
</span>
<span class="chip">
	Chips
	<button class="remove is-small"></button>
</span>
<span class="chip">
	Peas
	<button class="remove is-small"></button>
</span>

Colours

Chips are available in multiple colours. Just add a colour modifier like is-primary or is-dark.

Normal White Black Light Dark Primary Info Success Warning Danger
<span class="chip">Normal</span>
<span class="chip is-white">White</span>
<span class="chip is-black">Black</span>
<span class="chip is-light">Light</span>
<span class="chip is-dark">Dark</span>
<span class="chip is-primary">Primary</span>
<span class="chip is-info">Info</span>
<span class="chip is-success">Success</span>
<span class="chip is-warning">Warning</span>
<span class="chip is-danger">Danger</span>