Components

Badges

Small bordered, uppercase pills for roles, tags and statuses. Three variants — bordered (default), solid (ink fill) and accent — all squared to match the system.

Variants

Add ds-badge--solid for the filled treatment or ds-badge--accent for the accent outline.

Bordered · solid · accent

Director Admin New

<span class="ds-badge">Director</span>
<span class="ds-badge ds-badge--solid">Admin</span>
<span class="ds-badge ds-badge--accent">New</span>

Web Component

The <ds-badge> element self-classes from a variant attribute; the label is the element's text.

<ds-badge>

<ds-badge>Director</ds-badge>
<ds-badge variant="solid">Admin</ds-badge>