Tags

Tags are a source of metadata that help customers find what they need quickly.

Sizes

#extra-small-tag #small-tag #medium-tag #large-tag
<span class="tag tag--xs">#extra-small-tag</span>
<span class="tag tag--small">#small-tag</span>
<span class="tag tag--medium">#medium-tag</span>
<span class="tag tag--large">#large-tag</span>

Description

The default size (if modifier is added) is medium.

Action

<button type="button" class="btn tag">#clickable-tag</button>
<button type="button" disabled class="btn tag">#disabled-tag</button>

Description

This pattern is used when a tag needs to be clickable, or not clickable.

Group

#hello-world #💅🏽 #issa-tag #🙅🏻‍
<div class="tags">
  <span class="tag">#hello-world</span>
  <span class="tag">#💅🏽</span>
  <span class="tag">#issa-tag</span>
  <span class="tag">#🙅🏻‍</span>
</div>

Description

Useful for horizontally displaying a group of tags.

Typeahead

#My
<span class="tag">#My</span>
<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.

Do

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

Don't

  • Interchange tags and tabs