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>
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-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 When using the color palette to style your tags, the text color will be automatically calculated depending on the selected palette color.
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
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>
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>
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>
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">v1.1.1</span>
</div>
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>
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">v1.1.1</span>
</div>
<div class="is-addon-group">
<span class="tag is-dark">build</span>
<span class="tag is-success">passing</span>
</div>
</div>
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>
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>
These modifiers are not specific to the Tag module and can be found within the OrbitCSS global modifiers.
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $tag-background | color | #f3f3f3 |
| $tag-border-color | color | transparent |
| $tag-border-style | string | solid |
| $tag-border-width | units | 1px |
| $tag-color | color | $black |
| $tag-font-size | units | 0.8125rem |
| $tag-line-height | unitless | 1.6 |
| $tag-height | units | 1.6rem |
| $tag-radius | units | 6px |
| $tag-group-gap | units | 0.4rem |
| $tag-group-margin | units | 0.4rem |
| $tag-addon-radius | units | $tag-radius |