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