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

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.

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 undefined Will render the tag as a button element instead of span. Use this if the tag is clickable.
is-disabled false Use this to disable the interaction on a tag. Should only be passed in combination with a type="button" prop.
is-removeable false Renders the tag’ “removable” style variation. Should only be passed in combination with a type="button" prop.

Usage

Do

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

Don't

  • Interchange tags and tabs