Tag Components

Tags are a great way to label and/or categorize items. They are kind of like buttons, but smaller. Note that a hover effect is added automatically for a and button tags. All other tags do not include any hover styles.

Basic Usage

Tag (a tag)

Tag (any other tag)

<div class="tags">
  <a class="tag" href="#">Tag (a tag)</a>
  <button class="tag">Tag (button tag)</button>
  <div class="tag">Tag (any other tag)</div>
</div>

Variants

Colored Tags

White Tag Black Tag

Lightest Tag Light Tag Neutral Tag Dark Tag Darkest Tag

Primary Tag Secondary Tag Tertiary Tag Quaternary Tag

Success Tag Error Tag Warning Tag Notice Tag Info Tag Deprecated Tag Decorative Tag Muted Tag

<div class="tags">
  <a class="tag tag-white" href="#">White Tag</a>
  <a class="tag tag-black" href="#">Black Tag</a>
  <hr class="w-full border-0">
  <a class="tag tag-lightest" href="#">Lightest Tag</a>
  <a class="tag tag-light" href="#">Light Tag</a>
  <a class="tag tag-neutral" href="#">Neutral Tag</a>
  <a class="tag tag-dark" href="#">Dark Tag</a>
  <a class="tag tag-darkest" href="#">Darkest Tag</a>
  <hr class="w-full border-0">
  <a class="tag tag-primary" href="#">Primary Tag</a>
  <a class="tag tag-secondary" href="#">Secondary Tag</a>
  <a class="tag tag-tertiary" href="#">Tertiary Tag</a>
  <a class="tag tag-quaternary" href="#">Quaternary Tag</a>
  <hr class="w-full border-0">
  <a class="tag tag-success" href="#">Success Tag</a>
  <a class="tag tag-error" href="#">Error Tag</a>
  <a class="tag tag-warning" href="#">Warning Tag</a>
  <a class="tag tag-notice" href="#">Notice Tag</a>
  <a class="tag tag-info" href="#">Info Tag</a>
  <a class="tag tag-deprecated" href="#">Deprecated Tag</a>
  <a class="tag tag-decorative" href="#">Decorative Tag</a>
  <a class="tag tag-muted" href="#">Muted Tag</a>
</div>