Badge

Badges are compact visual indicators used to highlight status, categories, or counts.

<div class="tng-badge">Toyota</div>

Toyota

Number

<div class="tng-badge is-number">1</div>
<div class="tng-badge is-number is-contrast">99</div>

<div class="tng-badge is-subtle">Toyota</div>

Toyota

<div class="tng-badge is-error">
  <i aria-hidden class="tng-icon icon-close"></i>
  <span>Error</span>
</div>

Error

<div class="tng-badge is-info">
  <i aria-hidden class="tng-icon icon-info"></i>
  <span>Info</span>
</div>

Info

<div class="tng-badge is-success">
  <i aria-hidden class="tng-icon icon-check"></i>
  <span>Success</span>
</div>

Success

<div class="tng-badge is-warning">
  <i aria-hidden class="tng-icon icon-error"></i>
  <span>Warning</span>
</div>

Warning

Never rely on color alone to convey meaning. Always pair scheme badges (is-error, is-warning, is-info, is-success) with an icon and text.

For number badges used as counters (e.g. notification counts), provide context for screen readers:

<div class="tng-badge is-number" aria-label="3 unread notifications">3</div>

If a badge contains only an icon, include an aria-label so screen readers announce it.