Skip to content

CSS

A tag is a .tng-tag container holding plain text, with an optional leading .tng-icon. Mark a decorative icon aria-hidden so it doesn’t double-announce the label.

A tag has no light or dark modifier. It reads the surrounding tng-scheme and picks its own fill, border and label colour to suit the surface — so the same markup is correct on a white card and on a dark hero, and nesting a tag inside a .is-contrast region needs no change at the tag itself. Every example below carries a Neutral and a Contrast tab; the markup is identical in both, only the surface differs.

<div class="tng-tag">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
</div>
Tag text

Variants

Section titled “Variants”

Six colour variants sit alongside the neutral default. Each sets the fill, border and label colour, and each has its own value per surface.

Colour is the only thing that separates them, so it must never be the only signal of meaning — pair the variant with text or an icon that carries the same meaning for anyone who can’t distinguish the hue.

Primary

Section titled “Primary”
<div class="tng-tag is-primary">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
</div>
Tag text

Secondary

Section titled “Secondary”
<div class="tng-tag is-secondary">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
</div>
Tag text

Success

Section titled “Success”
<div class="tng-tag is-success">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
</div>
Tag text

Danger

Section titled “Danger”
<div class="tng-tag is-danger">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
</div>
Tag text

Info

Section titled “Info”
<div class="tng-tag is-info">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
</div>
Tag text

Warning

Section titled “Warning”
<div class="tng-tag is-warning">
  <i aria-hidden class="tng-icon icon-star"></i>
  <span>Tag text</span>
</div>
Tag text