Tag

Labels to highlight keywords and updates

The tag has many practical uses but is specifically great for highlighting inline content or attaching information to components. You can create a tag by using the tag class with a span or any other HTML tag.

<span class="tag">I'm a tag</span>
Copy

Style

Colors

You can use the color palette to color your tags by prefixing the name of a color with is-*. For example to use the primary color you would add the is-primary modifier to the tag.

<span class="tag is-primary">I'm a tag</span>
<span class="tag is-secondary">I'm a tag</span>
<span class="tag is-warning">I'm a tag</span>
<span class="tag is-danger">I'm a tag</span>
<span class="tag is-info">I'm a tag</span>
<span class="tag is-success">I'm a tag</span>
<span class="tag is-black">I'm a tag</span>
<span class="tag is-dark">I'm a tag</span>
<span class="tag is-night">I'm a tag</span>
<span class="tag is-light">I'm a tag</span>
<span class="tag is-white">I'm a tag</span>
<span class="tag is-light-grey">I'm a tag</span>
<span class="tag is-dark-grey">I'm a tag</span>
</> Show code
Copy

Outline

The is-outline modifier can be used if you do not want a tag with a block color background. This modifier must always be used with the color palette modifier.

<span class="tag is-primary is-outline">I'm a tag</span>
<span class="tag is-warning is-outline">I'm a tag</span>
<span class="tag is-danger is-outline">I'm a tag</span>
<span class="tag is-info is-outline">I'm a tag</span>
<span class="tag is-success is-outline">I'm a tag</span>
<span class="tag is-black is-outline">I'm a tag</span>
</> Show code
Copy

Rounded

The is-rounded modifier will give the tag rounded corners. You can edit the radius and give the tag a pill shape using the $tag-radius variable.

<span class="tag is-rounded">I'm a tag</span>
<span class="tag is-primary is-rounded">I'm a tag</span>
<span class="tag is-primary is-outline is-rounded">I'm a tag</span>
Copy

Sizing

Full width

Tags only take up as much room as required to display their content. Use the is-full modifier to force the tag to take up the entire width of the parent element.

<span class="tag is-full">I'm a full tag</span>
Copy

Grouping

Tag group

Use the is-tag-group modifier to evenly space tags and allow for wrapping and custom alignment.

<div class="is-tag-group">
  <span class="tag">I'm a tag</span>
  <span class="tag is-primary">I'm a tag</span>
  <span class="tag is-primary is-outline">I'm a tag</span>
</div>
Copy

Addon group

The is-addon-group modifier can be used to connect tags.

<div class="is-addon-group">
  <span class="tag is-dark">npm</span>
  <span class="tag is-primary">vx.x.x</span>
</div>
Copy

The corners of the two outermost tags can be rounded with the is-rounded modifier.

<div class="is-addon-group is-rounded">
  <span class="tag is-dark">build</span>
  <span class="tag is-success">passing</span>
</div>
Copy

You can even use the addon groups within the tag group.

<div class="is-tag-group">
  <div class="is-addon-group">
    <span class="tag is-dark">npm</span>
    <span class="tag is-primary">vX.X</span>
  </div>
  <div class="is-addon-group">
    <span class="tag is-dark">build</span>
    <span class="tag is-success">passing</span>
  </div>
</div>
Copy

Alignment

One of the key benefits of using groups is being able to align your tags within the container.

The has-centered modifier will align all of the tags from the center of the group outwards.

<div class="is-tag-group has-centered">
  <span class="tag">I'm a tag</span>
  <span class="tag is-primary">I'm a tag</span>
  <span class="tag is-primary is-outline">I'm a tag</span>
</div>
Copy

The has-end modifier will align all of the tags at the end of the group container.

<div class="is-tag-group has-end">
  <span class="tag">I'm a tag</span>
  <span class="tag is-primary">I'm a tag</span>
  <span class="tag is-primary is-outline">I'm a tag</span>
</div>
Copy

CSS variables

You can customize the style of tags using the following CSS variables.

.tag {
  --background-color: hsl(0deg, 0%, 95%, 1);
  --font-color: var(--color-black);
  --border-color: transparent;
  --border-width: 1px;
  --border-radius: 0;
  --font-size: 0.8125rem;
  --line-height: 1.6;
  --height: 1.6rem;
}
Copy

Create additional themed tags by updating the background, font & border variables.

.tag.is-orange {
  --background-color: #e28945;
  --border-color: transparent;
  --font-color: #ffffff;
}
Copy

Set the gap between tags within the button group using the --gap variable and the margin between each row with --margin.

.is-tag-group {
  --gap: 0.4rem;
}

.is-tag-group, .is-addon-group {
  --margin: 0.4rem;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.