2016-09-11 11:00:49 +00:00
---
2017-07-29 12:02:00 +00:00
title: Tags
2016-09-11 11:00:49 +00:00
layout: documentation
doc-tab: elements
doc-subtab: tag
---
2017-07-28 21:57:51 +00:00
{% capture tag %}
< span class = "tag" >
Tag label
< / span >
{% endcapture %}
2017-07-29 14:31:19 +00:00
{% capture tags_colors %}
2017-07-28 21:57:51 +00:00
< 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 >
2017-10-09 17:13:02 +00:00
< span class = "tag is-link" > Link< / span >
2017-07-28 21:57:51 +00:00
< 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 %}
2017-07-29 12:02:00 +00:00
{% capture rounded %}
< span class = "tag is-rounded" > Rounded< / span >
{% endcapture %}
2017-07-28 21:57:51 +00:00
{% 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 %}
2017-07-29 14:31:19 +00:00
{% capture is_delete %}
< a class = "tag is-delete" > < / a >
{% endcapture %}
{% capture tags %}
< div class = "tags" >
< span class = "tag" > One< / span >
< span class = "tag" > Two< / span >
< span class = "tag" > Three< / span >
< / div >
{% endcapture %}
{% capture tags_multiple %}
< div class = "tags" >
< span class = "tag" > One< / span >
< span class = "tag" > Two< / span >
< span class = "tag" > Three< / span >
< span class = "tag" > Four< / span >
< span class = "tag" > Five< / span >
< span class = "tag" > Six< / span >
< span class = "tag" > Seven< / span >
< span class = "tag" > Eight< / span >
< span class = "tag" > Nine< / span >
< span class = "tag" > Ten< / span >
< span class = "tag" > Eleven< / span >
< span class = "tag" > Twelve< / span >
< span class = "tag" > Thirteen< / span >
< span class = "tag" > Fourteen< / span >
< span class = "tag" > Fifteen< / span >
< span class = "tag" > Sixteen< / span >
< span class = "tag" > Seventeen< / span >
< span class = "tag" > Eighteen< / span >
< span class = "tag" > Nineteen< / span >
< span class = "tag" > Twenty< / span >
< / div >
{% endcapture %}
{% capture tags_addons %}
< div class = "tags has-addons" >
< span class = "tag" > Package< / span >
< span class = "tag is-primary" > Bulma< / span >
< / div >
{% endcapture %}
{% capture tags_field_addons %}
< div class = "field is-grouped is-grouped-multiline" >
< div class = "control" >
< div class = "tags has-addons" >
< span class = "tag is-dark" > npm< / span >
< span class = "tag is-info" > 0.5.0< / span >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
< span class = "tag is-dark" > build< / span >
< span class = "tag is-success" > passing< / span >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
< span class = "tag is-dark" > chat< / span >
< span class = "tag is-primary" > on gitter< / span >
< / div >
< / div >
< / div >
{% endcapture %}
{% capture tags_delete_addons %}
< div class = "tags has-addons" >
2017-07-29 14:47:33 +00:00
< span class = "tag is-danger" > Alex Smith< / span >
2017-07-29 14:31:19 +00:00
< a class = "tag is-delete" > < / a >
< / div >
{% endcapture %}
2016-09-11 11:00:49 +00:00
{% include subnav-elements.html %}
2017-07-29 14:31:19 +00:00
{% capture tags_blog_addons %}
< div class = "field is-grouped is-grouped-multiline" >
< div class = "control" >
< div class = "tags has-addons" >
2017-10-09 17:13:02 +00:00
< a class = "tag is-link" > Technology< / a >
2017-07-29 14:31:19 +00:00
< a class = "tag is-delete" > < / a >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
2017-10-09 17:13:02 +00:00
< a class = "tag is-link" > CSS< / a >
2017-07-29 14:31:19 +00:00
< a class = "tag is-delete" > < / a >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
2017-10-09 17:13:02 +00:00
< a class = "tag is-link" > Flexbox< / a >
2017-07-29 14:31:19 +00:00
< a class = "tag is-delete" > < / a >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
2017-10-09 17:13:02 +00:00
< a class = "tag is-link" > Web Design< / a >
2017-07-29 14:31:19 +00:00
< a class = "tag is-delete" > < / a >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
2017-10-09 17:13:02 +00:00
< a class = "tag is-link" > Open Source< / a >
2017-07-29 14:31:19 +00:00
< a class = "tag is-delete" > < / a >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
2017-10-09 17:13:02 +00:00
< a class = "tag is-link" > Community< / a >
2017-07-29 14:31:19 +00:00
< a class = "tag is-delete" > < / a >
< / div >
< / div >
< div class = "control" >
< div class = "tags has-addons" >
2017-10-09 17:13:02 +00:00
< a class = "tag is-link" > Documentation< / a >
2017-07-29 14:31:19 +00:00
< a class = "tag is-delete" > < / a >
< / div >
< / div >
< / div >
{% endcapture %}
2016-09-11 11:00:49 +00:00
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Tags< / h1 >
< h2 class = "subtitle" >
Small < strong > tag labels< / strong > to insert anywhere
< / h2 >
2017-07-29 12:02:00 +00:00
{%
include meta.html
colors=true
sizes=true
variables=true
%}
2016-09-11 11:00:49 +00:00
< hr >
< div class = "columns" >
< div class = "column is-4" >
2016-10-30 10:41:53 +00:00
By default, a < strong > tag< / strong > is a 1.5rem high label.
2016-09-11 11:00:49 +00:00
< / div >
< div class = "column is-2" >
< span class = "tag" >
Tag label
< / span >
< / div >
< div class = "column is-6" >
2017-07-28 21:57:51 +00:00
{% highlight html %}{{ tag }}{% endhighlight %}
2016-09-11 11:00:49 +00:00
< / div >
< / div >
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Colors" %}
2017-07-29 12:02:00 +00:00
2016-09-11 11:00:49 +00:00
< div class = "columns" >
< div class = "column is-4" >
2016-10-30 10:41:53 +00:00
Like with buttons, there are < strong > 9 different colors< / strong > available.
2016-09-11 11:00:49 +00:00
< / div >
< div class = "column is-2" >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-10-30 10:41:53 +00:00
< span class = "tag is-black" >
Black
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-dark" >
Dark
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-10-30 10:41:53 +00:00
< span class = "tag is-light" >
Light
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-10-30 10:41:53 +00:00
< span class = "tag is-white" >
White
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-primary" >
Primary
< / span >
< / p >
2017-10-09 17:13:02 +00:00
< p class = "field" >
< span class = "tag is-link" >
Link
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-info" >
Info
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-success" >
Success
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-warning" >
Warning
< / span >
< / p >
< span class = "tag is-danger" >
Danger
< / span >
< / div >
< div class = "column is-6" >
2017-07-29 14:31:19 +00:00
{% highlight html %}{{ tags_colors }}{% endhighlight %}
2016-09-11 11:00:49 +00:00
< / div >
< / div >
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Sizes" %}
2017-07-29 12:02:00 +00:00
2016-09-11 11:00:49 +00:00
< div class = "columns" >
< div class = "column is-4" >
2016-10-30 10:41:53 +00:00
And < strong > 2 additional< / strong > sizes.
2016-09-11 11:00:49 +00:00
< / div >
< div class = "column is-2" >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-primary is-medium" >
Medium
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-info is-large" >
Large
< / span >
< / p >
< / div >
< div class = "column is-6" >
2017-07-28 21:57:51 +00:00
{% highlight html %}{{ sizes }}{% endhighlight %}
2016-09-11 11:00:49 +00:00
< / div >
< / div >
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Modifiers" %}
2017-07-29 12:02:00 +00:00
< 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 >
2017-07-29 14:31:19 +00:00
< div class = "columns" >
< div class = "column is-4" >
You can add the < code > is-delete< / code > modifier to turn the tag into a < strong > delete button< / strong > .
< / div >
< div class = "column is-2" >
{{ is_delete }}
< / div >
< div class = "column is-6" >
{% highlight html %}{{ is_delete }}{% endhighlight %}
< / div >
< / div >
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Combinations" %}
2017-07-29 12:02:00 +00:00
2016-09-11 11:00:49 +00:00
< div class = "columns" >
< div class = "column is-4" >
2017-07-29 14:31:19 +00:00
You can append a < strong > delete button< / strong > .
2016-09-11 11:00:49 +00:00
< / div >
< div class = "column is-2" >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-success" >
Bar
2016-09-22 22:14:18 +00:00
< button class = "delete is-small" > < / button >
2016-09-11 11:00:49 +00:00
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-warning is-medium" >
Hello
2016-09-22 22:14:18 +00:00
< button class = "delete is-small" > < / button >
2016-09-11 11:00:49 +00:00
< / span >
< / p >
2017-03-14 21:00:58 +00:00
< p class = "field" >
2016-09-11 11:00:49 +00:00
< span class = "tag is-danger is-large" >
World
< button class = "delete" > < / button >
< / span >
< / p >
< / div >
< div class = "column is-6" >
2017-07-28 21:57:51 +00:00
{% highlight html %}{{ delete }}{% endhighlight %}
2016-09-11 11:00:49 +00:00
< / div >
< / div >
2017-07-28 21:57:51 +00:00
2017-08-14 17:25:14 +00:00
{% include anchor.html name="List of tags" %}
2017-07-29 14:31:19 +00:00
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
You can now create a < strong > list of tags< / strong > with the < code > .tags< / code > container.
< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-29 14:31:19 +00:00
{{ tags }}
< / div >
< / div >
< div class = "column" >
{% highlight html %}{{ tags }}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
If the list is < strong > very long< / strong > , it will automatically wrap on < strong > multiple lines< / strong > , while keeping all tags < strong > evenly spaced< / strong > .
< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-29 14:31:19 +00:00
{{ tags_multiple }}
< / div >
< / div >
< div class = "column highlight-full" >
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
You can < strong > attach tags together< / strong > with the < code > .has-addons< / code > modifier.
< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-29 14:31:19 +00:00
{{ tags_addons }}
< / div >
< / div >
< div class = "column highlight-full" >
{% highlight html %}{{ tags_addons }}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
You can attach a < strong > text< / strong > tag with a < strong > delete< / strong > tag together.
< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-29 14:31:19 +00:00
{{ tags_delete_addons }}
< / div >
< / div >
< div class = "column highlight-full" >
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
If you want to attach < code > .tags< / code > containers < strong > together< / strong > , simply use the < code > .field< / code > element with the < code > .is-grouped< / code > and < code > .is-grouped-multiline< / code > modifiers.
< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-29 14:31:19 +00:00
{{ tags_field_addons }}
< / div >
< / div >
< div class = "column highlight-full" >
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
This can be useful for a long list of < strong > blog tags< / strong > .
< / p >
< / div >
2017-08-14 11:44:24 +00:00
< div class = "bd-example" >
2017-07-29 14:31:19 +00:00
{{ tags_blog_addons }}
< / div >
< / div >
< div class = "column" >
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
< / div >
< / div >
2017-10-17 09:28:59 +00:00
{% include variables.html type='element' %}
2016-09-11 11:00:49 +00:00
< / div >
< / section >