Tag

Small tags or badges that can be inserted anywhere.

Some tag

<span class="tag">Some tag</span>

Colors

There are 10 different colors available.

Primary Accent Accent alt Success Light Success Warning Light Warning Danger Light Danger Info

<span class="tag is-primary">Primary</span>
<span class="tag is-accent">Accent</span>
<span class="tag is-accent-alt">Accent alt</span>
<span class="tag is-success">Success</span>
<span class="tag is-light-success">Light Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-light-warning">Light Warning</span>
<span class="tag is-danger">Danger</span>
<span class="tag is-light-danger">Light Danger</span>
<span class="tag is-info">Info</span>

Options

You can append a delete button.

Some tag Some tag Some tag 

<span class="tag">Some tag <button class="delete"></button></span>
<span class="tag is-primary">Some tag <button class="delete"></button></span>
<span class="tag is-accent">Some tag <button class="delete"></button></span>

Groups of tags

You may want to group a bunch of different tags, for this you can use the tags container.

If the group of tags is too long, it will wrap on multiple lines and tags will remain evenly spaced.

Primary Accent Accent alt Success Light Success Warning Light Warning Danger Light Danger Info

<div class="tags">
    <span class="tag is-primary">Primary</span>
    <span class="tag is-accent">Accent</span>
    <span class="tag is-accent-alt">Accent alt</span>
    <span class="tag is-success">Success</span>
    <span class="tag is-light-success">Light Success</span>
    <span class="tag is-warning">Warning</span>
    <span class="tag is-light-warning">Light Warning</span>
    <span class="tag is-danger">Danger</span>
    <span class="tag is-light-danger">Light Danger</span>
    <span class="tag is-info">Info</span>
</div>

Variables

Name Type Value Computed value
$tag-background-color color $grey-lighter rgb(242, 242, 242)
$tag-color color $text rgb(0, 0, 0)
$tag-radius size $radius-rounded 290486px
$tag-delete-margin size 1px
← Button →