See what's coming soon with Carbon V10-beta.

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

Tag

IBM Beta Third-Party Local Dedicated Custom Experimental Community Private

Vanilla JS

<!--
  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--ibm">IBM</span>
<span class="bx--tag bx--tag--beta">Beta</span>
<span class="bx--tag bx--tag--third-party">Third-Party</span>
<span class="bx--tag bx--tag--local">Local</span>
<span class="bx--tag bx--tag--dedicated">Dedicated</span>
<span class="bx--tag bx--tag--custom">Custom</span>
<span class="bx--tag bx--tag--experimental">Experimental</span>
<span class="bx--tag bx--tag--community">Community</span>
<span class="bx--tag bx--tag--private">Private</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.