Tag
Tag
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.
-->
<div>
<button class="bx--tag bx--tag--red">
<span class="bx--tag__label">Red</span>
</button>
<button class="bx--tag bx--tag--magenta">
<span class="bx--tag__label">Magenta</span>
</button>
<button class="bx--tag bx--tag--purple">
<span class="bx--tag__label">Purple</span>
</button>
<button class="bx--tag bx--tag--blue">
<span class="bx--tag__label">Blue</span>
</button>
<button class="bx--tag bx--tag--cyan">
<span class="bx--tag__label">Cyan</span>
</button>
<button class="bx--tag bx--tag--teal">
<span class="bx--tag__label">Teal</span>
</button>
<button class="bx--tag bx--tag--green">
<span class="bx--tag__label">Green</span>
</button>
<button class="bx--tag bx--tag--gray">
<span class="bx--tag__label">Gray</span>
</button>
<button class="bx--tag bx--tag--cool-gray">
<span class="bx--tag__label">Cool-Gray</span>
</button>
<button class="bx--tag bx--tag--warm-gray">
<span class="bx--tag__label">Warm-Gray</span>
</button>
</div>
<div>
</div>
Tag filter
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.
-->
<div>
</div>
<div>
<button class="bx--tag bx--tag--filter" title="Clear filter">
<span class="bx--tag__label">filter</span>
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"></path></svg>
</button>
</div>
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 |