Tags are compact elements that represent an input or attribute.
<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">#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.
<tk-tag type="button" size="small" is-removeable aria-label="Remove this label">
Removeable
<tk-icon
name="close"
size="auto"
slot="icon"
/>
</tk-tag>
<tk-tag type="button" is-removeable aria-label="Remove this label">
Removeable
<tk-icon
name="close"
size="auto"
slot="icon"
/>
</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 type="intent" color="green" size="small">Green</tk-tag>
<tk-tag type="intent" color="red" size="small">Red</tk-tag>
<tk-tag type="intent" color="purple" size="small">Purple</tk-tag>
<tk-tag type="intent" color="yellow" size="small">Yellow</tk-tag>
<tk-tag type="intent" color="cyan" size="small">Cyan</tk-tag>
<tk-tag type="intent" color="teal" size="small">Teal</tk-tag>
<tk-tag type="intent" color="pink" size="small">Pink</tk-tag>
<tk-tag type="intent" color="orange" size="small">Orange</tk-tag>
<tk-tag type="intent" color="grey" size="small">Grey</tk-tag>
</div>Intent tags are used to convey intent. They are most commonly used in Interactive Path Flows and the colors are randomly selected but grouped by the same intent.
<div>
<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="neutral" size="small">Neutral</tk-tag>
</div>Smart tags are used to convey positive, negative, and neutral sentiments. Smart tags are used in places such as the Video Player and the Single Study View Page.
| Property | Options | Default | Description |
|---|---|---|---|
size |
small, medium |
medium |
Sets the size of the tag. |
type |
button, intent, smart |
undefined |
Sets the type of the tag. |
is-disabled |
true, false |
false |
Use this to disable the interaction on a tag. Should only be passed in combination with a type="button" prop. |
is-removeable |
true, false |
false |
Renders the tag’ “removable” style variation. Should only be passed in combination with a type="button" prop. |
color |
green, red, purple, yellow, cyan, teal, pink, orange, grey |
undefined |
Renders the tag in a color variation to capture intent. Should only be passed in combination with a type="intent" prop. |
sentiment |
positive, negative, neutral |
undefined |
For use in combination with a type="smart" prop. Renders the corresponding color for the chosen sentiment. |