Tags

Small tag labels to insert anywhere

Colors Yes

Sizes Yes

Variables Yes

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

Tag label

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

Colors #

Like with buttons, there are 10 different colors available.

Black

Dark

Light

White

Primary

Link

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-link">Link</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>

Sizes #

And 2 additional sizes.

Medium

Large

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

Modifiers #

You can add the is-rounded modifier to make a rounded tag.

Rounded

<span class="tag is-rounded">Rounded</span>

You can add the is-delete modifier to turn the tag into a delete button.

<a class="tag is-delete"></a>

Combinations #

You can 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>

List of tags #

You can now create a list of tags with the .tags container.

One Two Three

<div class="tags">
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
</div>

If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty

    <div class="tags">
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
  <span class="tag">Four</span>
  <span class="tag">Five</span>
  <span class="tag">Six</span>
  <span class="tag">Seven</span>
  <span class="tag">Eight</span>
  <span class="tag">Nine</span>
  <span class="tag">Ten</span>
  <span class="tag">Eleven</span>
  <span class="tag">Twelve</span>
  <span class="tag">Thirteen</span>
  <span class="tag">Fourteen</span>
  <span class="tag">Fifteen</span>
  <span class="tag">Sixteen</span>
  <span class="tag">Seventeen</span>
  <span class="tag">Eighteen</span>
  <span class="tag">Nineteen</span>
  <span class="tag">Twenty</span>
</div>
  

You can attach tags together with the .has-addons modifier.

Package Bulma

    <div class="tags has-addons">
  <span class="tag">Package</span>
  <span class="tag is-primary">Bulma</span>
</div>
  

You can attach a text tag with a delete tag together.

Alex Smith

    <div class="tags has-addons">
  <span class="tag is-danger">Alex Smith</span>
  <a class="tag is-delete"></a>
</div>
  

If you want to attach .tags containers together, simply use the .field element with the .is-grouped and .is-grouped-multiline modifiers.

npm 0.5.0

build passing

chat on gitter

    <div class="field is-grouped is-grouped-multiline">
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">npm</span>
      <span class="tag is-info">0.5.0</span>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">build</span>
      <span class="tag is-success">passing</span>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">chat</span>
      <span class="tag is-primary">on gitter</span>
    </div>
  </div>
</div>
  

This can be useful for a long list of blog tags.

Technology

CSS

Flexbox

Web Design

Open Source

Community

Documentation

<div class="field is-grouped is-grouped-multiline">
  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Technology</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">CSS</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Flexbox</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Web Design</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Open Source</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Community</a>
      <a class="tag is-delete"></a>
    </div>
  </div>

  <div class="control">
    <div class="tags has-addons">
      <a class="tag is-link">Documentation</a>
      <a class="tag is-delete"></a>
    </div>
  </div>
</div>

Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name	Type	Default value	Computed value
Name	Type	Default value	Computed value
`$tag-background-color`	color	`$background`	`hsl(0, 0%, 96%)`
`$tag-color`	color	`$text`	`hsl(0, 0%, 29%)`
`$tag-radius`	size	`$radius`	`4px`
`$tag-delete-margin`	size	`1px`