Tag

Tags are compact labels used to categorize or highlight content.

<div class="tng-tag">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
  <a class="tng-link" href="#">Link</a>
</div>

Tag text Link

Schemes

Error

<div class="tng-tag is-error">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
  <a class="tng-link" href="#">Link</a>
</div>

Tag text Link

Info

<div class="tng-tag is-info">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
  <a class="tng-link" href="#">Link</a>
</div>

Tag text Link

Success

<div class="tng-tag is-success">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
  <a class="tng-link" href="#">Link</a>
</div>

Tag text Link

Bold

<div class="tng-tag is-bold">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
  <a class="tng-link" href="#">Link</a>
</div>

Tag text Link

<div class="tng-tag is-bold is-error">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
  <a class="tng-link" href="#">Link</a>
</div>

Tag text Link

<div class="tng-tag is-bold is-info">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
  <a class="tng-link" href="#">Link</a>
</div>

Tag text Link

<div class="tng-tag is-bold is-success">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
  <a class="tng-link" href="#">Link</a>
</div>

Tag text Link

Accessibility

Icons

Mark decorative icons with aria-hidden="true" (already shown in the examples).

Dismissible tags

If a tag is dismissible (via a close button), ensure the button has an accessible label, for example aria-label="Remove tag".

Color is not enough

Never rely on color alone for status tags — pair the scheme (is-error, is-info, is-success) with text or an icon so the meaning is accessible.