Bulma v0.4.4: a modern CSS framework based on Flexbox

By default, a tag is a 1.5rem high label.

Tag label

<span class="tag">
  Tag label
</span>

Like with buttons, there are 9 different colors available.

Black

Dark

Light

White

Primary

Info

Success

Warning

Danger

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

And 2 additional sizes.

Medium

Large

<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>

You can also append a delete button.

Bar

Hello

World

<span class="tag is-success">
  Bar
  <button class="delete is-small"></button>
</span>
<span class="tag is-warning is-medium">
  Hello
  <button class="delete is-small"></button>
</span>
<span class="tag is-danger is-large">
  World
  <button class="delete"></button>
</span>

Tags

Small tag labels to insert anywhere