Tags

Tags are compact elements that represent an input or attribute.

Sizes

#small-tag #medium-tag
<tk-tag size="small">#small-tag</tk-tag>
<tk-tag size="medium">#medium-tag</tk-tag>

Description

The default size is medium.

Action

#clickable-tag #disabled-tag
<tk-tag type="button">#clickable-tag</tk-tag>
<tk-tag type="button" is-disabled>#disabled-tag</tk-tag>

Description

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.

Action removeable

Removeable Removeable
<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>

Description

This pattern is used when a tag needs to be removeable.

Group

#hello-world #💅🏽 #issa-tag #🙅🏻‍
<div>
  <tk-tag>#hello-world</tk-tag>
  <tk-tag>#💅🏽</tk-tag>
  <tk-tag>#issa-tag</tk-tag>
  <tk-tag>#🙅🏻‍</tk-tag>
</div>

Description

Useful for horizontally displaying a group of tags.

Typeahead

#My
<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>

Description

Supercharge the tag pattern by incorporating the Typeahead pattern. Customers can select from a dynamic list of tags matching the same characters.

Intent Tags

Green Red Purple Yellow Cyan Teal Pink Orange Grey
<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>

Description

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.

Smart tags

Positive Negative Neutral
<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>

Description

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.

Accessibility

  • Add an aria-label to the element to provide more context to the screen reader

Props

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.

Usage

Do

  • Use tag styling for user-generated data like: emails and words

Don't

  • Interchange tags and tabs