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">
<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.
<tk-tag size="small" is-removeable aria-label="Remove this tag">
Removeable
</tk-tag>
<tk-tag size="medium" is-removeable aria-label="Remove this tag">
Removeable
</tk-tag>
<tk-tag size="medium" is-removeable aria-label="Remove this tag">
<tk-icon name="info" class="mr-1x"></tk-icon> Removeable
</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="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
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
closeAriaLabel |
close-aria-label |
Customize the label read to screen readers for the close (x) button. |
string |
${translate('tag_close')} |
color |
color |
Renders the tag in a color variation to capture intent. Should only be passed in combination with a type="intent" prop. |
"aqua" | "blue" | "cyan" | "green" | "grey" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" |
undefined |
isDisabled |
is-disabled |
Use this to disable the interaction on a tag. Should only be passed in combination with a type="button" prop. |
boolean |
false |
isRemoveable |
is-removeable |
Renders the tag with a close (“removeable”) button and applies the removeable variant styles. | boolean |
false |
sentiment |
sentiment |
For use in combination with a type="smart" prop. Renders the corresponding color for the chosen sentiment. |
"friction" | "negative" | "other" | "positive" |
undefined |
size |
size |
Sets the size of the tag. | "large" | "medium" | "small" | "xs" |
'medium' |
type |
type |
Sets the type of the tag. | "button" | "intent" | "smart" |
undefined |
| Event | Description | Type |
|---|---|---|
close |
CustomEvent<void> |
closeTag() => Promise<void>Type: Promise<void>
This component will receive a different set of styles based on the active --tk-theme CSS property.
To receive theme styling: make sure to set the desired value for this property inside of the :root selector.
These styles are not ready for production, so they cannot be used in Orders