Tags are a source of metadata that help customers find what they need quickly.
<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>The default size (if modifier is added) is medium.
<button type="button" class="btn tag">#clickable-tag</button>
<button type="button" disabled class="btn tag">#disabled-tag</button>This pattern is used when a tag needs to be clickable, or not clickable.
<div class="tags">
<span class="tag">#hello-world</span>
<span class="tag">#💅🏽</span>
<span class="tag">#issa-tag</span>
<span class="tag">#🙅🏻</span>
</div>Useful for horizontally displaying a group of tags.
<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>Supercharge the tag pattern by incorporating the Typeahead pattern. Customers can select from a dynamic list of tags matching the same characters.