Tags are compact elements that represent an input or attribute.
This component is deprecated! Please use the new Tag instead.
<tk-tag size="small">#small-tag</tk-tag>
<tk-tag size="medium">#medium-tag</tk-tag>
The default size is medium
.
<tk-tag type="button" color="blue">#clickable-tag</tk-tag>
<tk-tag type="button" color="blue">
<tk-icon name="info" class="mr-1x"></tk-icon> #clickable-tag
</tk-tag>
<tk-tag type="button" is-disabled>#disabled-tag</tk-tag>
Will render the tag as a button
element instead of span
.
This pattern is used when a tag needs to be clickable, or not clickable.
The color
attribute must be defined when a type
has been set.
<tk-tag size="small" is-removeable aria-label="Remove this tag">
Removable
</tk-tag>
<tk-tag size="medium" is-removeable aria-label="Remove this tag">
Removable
</tk-tag>
<tk-tag size="medium" is-removeable aria-label="Remove this tag">
<tk-icon name="info" class="mr-1x"></tk-icon> Removable
</tk-tag>
This pattern is used when a tag needs to be removeable.
<div>
<tk-tag>#hello-world</tk-tag>
<tk-tag>#π
π½</tk-tag>
<tk-tag>#issa-tag</tk-tag>
<tk-tag>#π
π»β</tk-tag>
</div>
Useful for horizontally displaying a group of tags.
<tk-tag>#My</tk-tag>
<div class="typeahead">
<div class="typeahead__results">
<div class="typeahead__wrap">
<ul class="typeahead__list">
<li class="typeahead__item">
<button type="button" class="typeahead__option">
<strong>#my</strong>-tag-1
</button>
</li>
<li class="typeahead__item">
<button type="button" class="typeahead__option">
<strong>#my</strong>-tag-2
</button>
</li>
<li class="typeahead__item">
<button type="button" class="typeahead__option">
<strong>#my</strong>_tag_3
</button>
</li>
<li class="typeahead__item">
<button type="button" class="typeahead__option">
<strong>#my</strong>tag4
</button>
</li>
</ul>
</div>
</div>
</div>
Supercharge the tag pattern by incorporating the Typeahead pattern. Customers can select from a dynamic list of tags matching the same characters.
<div>
<tk-tag color="dark-grey" size="small">Dark Grey</tk-tag>
<tk-tag color="green" size="small">Green</tk-tag>
<tk-tag color="red" size="small">Red</tk-tag>
<tk-tag color="purple" size="small">Purple</tk-tag>
<tk-tag color="yellow" size="small">Yellow</tk-tag>
<tk-tag color="cyan" size="small">Cyan</tk-tag>
<tk-tag color="teal" size="small">Teal</tk-tag>
<tk-tag color="pink" size="small">Pink</tk-tag>
<tk-tag color="orange" size="small">Orange</tk-tag>
<tk-tag color="grey" size="small">Grey</tk-tag>
</div>
</div>
<div>
<tk-tag type="smart" sentiment="friction" size="small">Friction</tk-tag>
<tk-tag type="smart" sentiment="positive" size="small">Positive</tk-tag>
<tk-tag type="smart" sentiment="negative" size="small">Negative</tk-tag>
<tk-tag type="smart" sentiment="other" size="small">Other</tk-tag>
</div>
Smart tags are used to convey friction, positive, negative, and other type sentiments. Smart tags are used in places such as the Video Player and the Single Study View Page.
Add an aria-label to the element to provide more context to the screen reader