--- title: Tags layout: docs theme: library 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 tags_light_colors %} 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 hoverable_tags %} Hover me
Hover me
{% endcapture %} {% capture hoverable_colored_tags %} Hover me
Hover me
Hover me
Hover me
{% 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 {{ site.data.meta.version }}
build passing
chat on gitter
{% endcapture %} {% capture tags_delete_addons %}
Alex Smith
{% endcapture %} {% capture tags_blog_addons %}
CSS
{% endcapture %}

The Bulma tag is a small but versatile element. It's very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.

By default, a tag is a 1.5rem high label.
Tag label
{% highlight html -%} {{- tag -}} {%- endhighlight %}
{% include docs/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 %}

You can now choose the light version of a color.

Primary

Link

Info

Success

Warning

Danger
{% highlight html -%} {{- tags_light_colors -}} {%- endhighlight %}
{% include docs/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 %}

You can change the size of all tags at once:

{% include docs/elements/snippet.html content=are_medium %} {% include docs/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 docs/elements/snippet.html content=are_medium_one_large %} {% include docs/elements/anchor.html name="Hover/Active state" %}

A tag element will react to the :hover and :active states if:

{% include docs/elements/snippet.html content=hoverable_tags %} {% include docs/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 docs/elements/anchor.html name="Combinations" %}
You can create hoverable colored tags.
{{ hoverable_colored_tags }}
{% highlight html -%} {{- hoverable_colored_tags -}} {%- endhighlight %}
You can append a delete button.

Bar

Hello

World

{% highlight html -%} {{- delete -}} {%- endhighlight %}
{% include docs/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 %}
{% include docs/elements/anchor.html name="Tag addons" %}

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 %}