--- title: Tags layout: documentation doc-tab: elements doc-subtab: tag breadcrumb: - home - documentation - elements - elements-tag meta: colors: true sizes: true variables: true --- {% capture tag %} Tag label {% endcapture %} {% capture tags_colors %} Black Dark Light White Primary Link Info Success Warning Danger {% endcapture %} {% capture sizes %} Normal Medium Large {% endcapture %} {% capture are_medium %}
All Medium Size
{% endcapture %} {% capture are_large %}
All Large Size
{% endcapture %} {% capture are_medium_one_large %}
Medium Normal Medium Large Medium
{% endcapture %} {% capture rounded %} Rounded {% endcapture %} {% capture delete %} Bar Hello World {% endcapture %} {% capture is_delete %} {% endcapture %} {% capture tags %}
One Two Three
{% endcapture %} {% capture tags_multiple %}
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty
{% endcapture %} {% capture tags_addons %}
Package Bulma
{% endcapture %} {% capture tags_field_addons %}
npm 0.5.0
build passing
chat on gitter
{% endcapture %} {% capture tags_delete_addons %}
Alex Smith
{% endcapture %} {% capture tags_blog_addons %}
Technology
CSS
Flexbox
Web Design
Open Source
Community
Documentation
{% endcapture %}
By default, a tag is a 1.5rem high label.
Tag label
{% highlight html %}{{ tag }}{% endhighlight %}
{% include elements/anchor.html name="Colors" %}
Like with buttons, there are 10 different colors available.

Black

Dark

Light

White

Primary

Link

Info

Success

Warning

Danger
{% highlight html %}{{ tags_colors }}{% endhighlight %}
{% include elements/anchor.html name="Sizes" %}

The tag comes in 3 different sizes.

While the default size is the normal one, the is-normal modifier exists in case you need to reset the tag to its normal size.

Normal

Medium

Large

{% highlight html %}{{ sizes }}{% endhighlight %}
{% include elements/new-tag.html version="0.7.3" %}

You can change the size of all tags at once:

{% include elements/snippet.html content=are_medium %} {% include elements/snippet.html content=are_large %}

You can however keep the original size of a subset of tags, simply by applying one of its modifier class:

{% include elements/snippet.html content=are_medium_one_large %} {% include elements/anchor.html name="Modifiers" %}
You can add the is-rounded modifier to make a rounded tag.
{{ rounded }}
{% highlight html %}{{ rounded }}{% endhighlight %}
You can add the is-delete modifier to turn the tag into a delete button.
{{ is_delete }}
{% highlight html %}{{ is_delete }}{% endhighlight %}
{% include elements/anchor.html name="Combinations" %}
You can append a delete button.

Bar

Hello

World

{% highlight html %}{{ delete }}{% endhighlight %}
{% include elements/anchor.html name="List of tags" %}

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

{{ tags }}
{% highlight html %}{{ tags }}{% endhighlight %}

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

{{ tags_multiple }}
{% highlight html %}{{ tags_multiple }}{% endhighlight %}

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

{{ tags_addons }}
{% highlight html %}{{ tags_addons }}{% endhighlight %}

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

{{ tags_delete_addons }}
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}

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

{{ tags_field_addons }}
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}

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

{{ tags_blog_addons }}
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
{% include elements/variables.html type='element' %}