Tag

Red Magenta Purple Blue Cyan Teal Green Gray Cool-Gray Warm-Gray
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<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--gray">Gray</span>
<span class="bx--tag bx--tag--cool-gray">Cool-Gray</span>
<span class="bx--tag bx--tag--warm-gray">Warm-Gray</span>

Tag filter

filter
Vanilla JS
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->


<span class="bx--tag bx--tag--filter" title="Clear filter">
  filter
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Clear filter" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
</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.