Experimental

Tag

Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.

Experimental Tag

Component Red Magenta Purple Blue Cyan Teal Green Cool-Gray Warm-Gray Component

Vanilla JS

<span class="bx--tag bx--tag--basic">Component</span>
<span class="bx--tag bx--tag--red">Red</span>
<span class="bx--tag bx--tag--magenta">Magenta</span>
<span class="bx--tag bx--tag--purple">Purple</span>
<span class="bx--tag bx--tag--blue">Blue</span>
<span class="bx--tag bx--tag--cyan">Cyan</span>
<span class="bx--tag bx--tag--teal">Teal</span>
<span class="bx--tag bx--tag--green">Green</span>
<span class="bx--tag bx--tag--cool-gray">Cool-Gray</span>
<span class="bx--tag bx--tag--warm-gray">Warm-Gray</span>
<span class="bx--tag bx--tag--basic" disabled>Component</span>

Documentation

SCSS

Mixins

Mixins specific to tag are located in src/components/tag/_mixins.scss.

Name Params Description
tag-theme $bg-color, $text-color Adds given background-color and text color

Modifiers

Use these modifiers with .bx--tag class.

Selector Description
.bx--tag--ibm Apply the colors for an IBM branded service tag.
.bx--tag--beta Apply the colors for a beta service tag.
.bx--tag--third-party Apply the colors for a third-party vendor tag.
.bx--tag--local Apply the colors for a local tag.
.bx--tag--dedicated Apply the colors for a dedicated tag.
.bx--tag--custom Apply the colors for a custom tag.
.bx--tag--experimental Apply the colors for an experimental tag.
.bx--tag--community Apply the colors for a community-driven service tag.
.bx--tag--private Apply the colors for a private tag.
.bx--tag--deprecated Apply the colors for a deprecated tag.