Components

Badge

A short, legible category or state beside a value. It stays outside measured layouts.

Tones, dots and sizes

neutralbluevioletambergreenred

SupportedPartialUnknown

smmd

A dot carries state; the text always says it.

Used on Platform behavior.

Usage and interface

DemoBadge renders span.ui-badge with tone, variant (soft or dot) and size (sm or md) mapped to data attributes. Badges are annotations: keep them outside measured flex, grid or float layouts.

<DemoBadge tone="green" variant="dot">Supported</DemoBadge><DemoBadge size="sm">Static</DemoBadge>

<span class="ui-badge" data-tone="green" data-variant="dot">Supported</span><span class="ui-badge" data-size="sm">Static</span>