Badge

A compact label for statuses, counts, and tags. Inline-flex pill; tones via[data-tone]. Status tones consume the WCAG-AA-bg/-text token pairs, so they're legible in both themes by construction.

Tones

With a leading dot

A status pip for at-a-glance scanning.

Groups

Use .pl-c-badge-group for wrapping sets of status badges.

In context

Badges pair naturally with table cells, list items, and headers.