bulma/docs/documentation/elements/tag.html

---
title: Tags
layout: documentation
doc-tab: elements
doc-subtab: tag
variables:
- name: $tag-background-color
  value: background
- name: $tag-color
  value: text
---

{% capture tag %}
<span class="tag">
  Tag label
</span>
{% endcapture %}

{% capture tags %}
<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>
{% endcapture %}

{% capture sizes %}
<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>
{% endcapture %}

{% capture rounded %}
<span class="tag is-rounded">Rounded</span>
{% endcapture %}

{% capture delete %}
<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>
{% endcapture %}

{% include subnav-elements.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Tags</h1>
    <h2 class="subtitle">
      Small <strong>tag labels</strong> to insert anywhere
    </h2>
    {%
      include meta.html
      colors=true
      sizes=true
      variables=true
    %}

    <hr>

    <div class="columns">
      <div class="column is-4">
        By default, a <strong>tag</strong> is a 1.5rem high label.
      </div>
      <div class="column is-2">
        <span class="tag">
          Tag label
        </span>
      </div>
      <div class="column is-6">
        {% highlight html %}{{ tag }}{% endhighlight %}
      </div>
    </div>

    {% include heading.html name="Colors" %}

    <div class="columns">
      <div class="column is-4">
        Like with buttons, there are <strong>9 different colors</strong> available.
      </div>
      <div class="column is-2">
        <p class="field">
          <span class="tag is-black">
            Black
          </span>
        </p>
        <p class="field">
          <span class="tag is-dark">
            Dark
          </span>
        </p>
        <p class="field">
          <span class="tag is-light">
            Light
          </span>
        </p>
        <p class="field">
          <span class="tag is-white">
            White
          </span>
        </p>
        <p class="field">
          <span class="tag is-primary">
            Primary
          </span>
        </p>
        <p class="field">
          <span class="tag is-info">
            Info
          </span>
        </p>
        <p class="field">
          <span class="tag is-success">
            Success
          </span>
        </p>
        <p class="field">
          <span class="tag is-warning">
            Warning
          </span>
        </p>
        <span class="tag is-danger">
          Danger
        </span>
      </div>
      <div class="column is-6">
        {% highlight html %}{{ tags }}{% endhighlight %}
      </div>
    </div>

    {% include heading.html name="Sizes" %}

    <div class="columns">
      <div class="column is-4">
        And <strong>2 additional</strong> sizes.
      </div>
      <div class="column is-2">
        <p class="field">
          <span class="tag is-primary is-medium">
            Medium
          </span>
        </p>
        <p class="field">
          <span class="tag is-info is-large">
            Large
          </span>
        </p>
      </div>
      <div class="column is-6">
        {% highlight html %}{{ sizes }}{% endhighlight %}
      </div>
    </div>

    {% include heading.html name="Modifiers" %}

    <div class="columns">
      <div class="column is-4">
        You can add the <code>is-rounded</code> modifier to make a <strong>rounded</strong> tag.
      </div>
      <div class="column is-2">
        {{ rounded }}
      </div>
      <div class="column is-6">
        {% highlight html %}{{ rounded }}{% endhighlight %}
      </div>
    </div>

    {% include heading.html name="Combinations" %}

    <div class="columns">
      <div class="column is-4">
        You can also append a <strong>delete button</strong>.
      </div>
      <div class="column is-2">
        <p class="field">
          <span class="tag is-success">
            Bar
            <button class="delete is-small"></button>
          </span>
        </p>
        <p class="field">
          <span class="tag is-warning is-medium">
            Hello
            <button class="delete is-small"></button>
          </span>
        </p>
        <p class="field">
          <span class="tag is-danger is-large">
            World
            <button class="delete"></button>
          </span>
        </p>
      </div>
      <div class="column is-6">
        {% highlight html %}{{ delete }}{% endhighlight %}
      </div>
    </div>

    {% include variables.html element=true %}
  </div>
</section>