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.


I'm a 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.


I'm a tagI'm a tagI'm a tagI'm a tagI'm a tagI'm a tagI'm a tagI'm a tagI'm a tagI'm a tagI'm a tagI'm a tag
<span class="tag is-primary">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

When using the color palette to style your tags, the text color will be automatically calculated depending on the selected palette color.


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.


I'm a tagI'm a tagI'm a tagI'm a tagI'm a tagI'm a tag
<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.


I'm a tagI'm a tagI'm a tag
<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.


I'm a full tag
<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.


I'm a tagI'm a tagI'm a tag
<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.


npmv1.1.1
<div class="is-addon-group">
  <span class="tag is-dark">npm</span>
  <span class="tag is-primary">v{getOrbitVersion()}</span>
</div>
Copy

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


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


npmv1.1.1
buildpassing
<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.


I'm a tagI'm a tagI'm a tag
<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.


I'm a tagI'm a tagI'm a tag
<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

These modifiers are not specific to the Tag module and can be found within the OrbitCSS global modifiers.


Variables

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


VariableTypeDefault value
$tag-backgroundcolor#f3f3f3
$tag-border-colorcolortransparent
$tag-border-stylestringsolid
$tag-border-widthunits1px
$tag-colorcolor$black
$tag-font-sizeunits0.8125rem
$tag-line-heightunitless1.6
$tag-heightunits1.6rem
$tag-radiusunits6px
$tag-group-gapunits0.4rem
$tag-group-marginunits0.4rem
$tag-addon-radiusunits$tag-radius