CSS
A Badge is a non-interactive indicator, so render it with a non-interactive inline tag such as <span>. .tng-badge is an inline flex row, so it sits alongside whatever it describes and shrinks to its content. Without a modifier it renders the neutral status.
<span class="tng-badge">Toyota</span>Elements
Section titled “Elements”A leading icon is optional and always decorative — mark it aria-hidden="true" and keep the meaning in the text. The icon takes the badge’s border colour automatically, and .tng-badge:has(.tng-icon) tightens the inline-start padding so an icon badge stays balanced.
<span class="tng-badge"> <i class="tng-icon icon-info" aria-hidden="true"></i> <span>Toyota</span></span>Variants
Section titled “Variants”Four feedback modifiers recolour the fill and the border — and with it the icon. The text stays neutral in every one, so pair each modifier with an icon or wording that names the state rather than relying on the colour alone.
The default variant is default.
<span class="tng-badge is-error"> <i class="tng-icon icon-close" aria-hidden="true"></i> <span>Error</span></span><span class="tng-badge is-info"> <i class="tng-icon icon-info" aria-hidden="true"></i> <span>Info</span></span>Success
Section titled “Success”<span class="tng-badge is-success"> <i class="tng-icon icon-check" aria-hidden="true"></i> <span>Success</span></span>Warning
Section titled “Warning”<span class="tng-badge is-warning"> <i class="tng-icon icon-error" aria-hidden="true"></i> <span>Warning</span></span>Number
Section titled “Number”Add is-number to render a count. The badge takes a square aspect ratio so a single digit reads as a circle, and the text is set semibold on a neutral surface. Add is-contrast alongside it for the filled treatment — a dark surface with light text — for counts that need to pull more attention. is-contrast does nothing on its own; it only applies in combination with is-number.
A count badge ships in one size and grows with its content rather than truncating, so cap long values in the markup (99+) instead of letting the badge stretch.
<span class="tng-badge is-number">1</span><span class="tng-badge is-number is-contrast">99</span>