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

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

Technology

CSS

Flexbox

Web Design

Open Source

Community

Documentation

{% 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:

it's an anchor element <a class="tag">
it's a button element <button class="tag">
it has the is-hoverable modifier class <div class="tag is-hoverable">

{% 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.

{% highlight html -%} {{- rounded -}} {%- endhighlight %}

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

{% highlight html -%} {{- is_delete -}} {%- endhighlight %}

{% include docs/elements/anchor.html name="Combinations" %}

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

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

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

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

{% include docs/elements/anchor.html name="Tag addons" %}

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

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

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

{% 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.

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

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

{% highlight html -%} {{- tags_blog_addons -}} {%- endhighlight %}