Badge
ds-badge shows a status in one shared row. Products supply the words, icon
and status meaning; DS1 owns the face, type, truncation and independent scale.
It is not a button and adds no tab stop.
Its width rounds up to whole squares, within the available space. Content,
font and surface-scale changes remeasure once per frame while changing;
standing idle does not run a measurement loop.
<ds-badge icon="lock">Password on</ds-badge><ds-badge icon="archive" icon-only data-tooltip="Archived">Archived</ds-badge>Keep the status words as children even in icon-only mode. The label remains
available to assistive technology; the shared icon is decorative. Without an
icon, icon-only falls back to displaying the words. Load the shared tooltip
helper to explain compact badges on hover or focus of their containing control.
Set --ds-badge-background and --ds-badge-color with shared colour tokens
when a status needs a meaningful colour. The default is neutral. Place a badge
inside a shared Button when the containing action is interactive. Products may
choose the compact mode from available layout space; do not draw a second chip
or resize its internal icon and type. Copy badge through Sync 1.
React products can import Badge from DS1/react/badge, registering the Lit
element in the browser before hydration. iconOnly is a boolean property;
native attributes, children and the forwarded ref belong to the shared host.
Design examples
Section titled “Design examples”Icons and short state labels sit beside the content they describe.
<section class="specimen">
<ds-row class="line" ><ds-text literal class="grow">Winter issue</ds-text><ds-badge icon="check">Approved</ds-badge></ds-row><ds-row class="line" ><ds-text literal class="grow">Field recordings</ds-text><ds-badge icon="lock">Private</ds-badge></ds-row><ds-row class="line" ><ds-text literal class="grow">Early sketches</ds-text><ds-badge icon="archive">Archived</ds-badge></ds-row>
</section>
<style>
.specimen { width: 100%; min-width: 0; --cell: calc(20px * var(--sf, 1)); }
.specimen .line { width: 100%; }
.specimen .grow { flex: 1; min-width: 0; }
.specimen .muted { color: var(--ds-text-color-muted); }
.specimen .mono { --ds-typeface-regular: var(--ds-typeface-mono); font-variant-numeric: tabular-nums; }
.specimen .value { width: calc(4 * var(--cell)); text-align: right; }
.specimen .mark { display: inline-flex; align-items: flex-end; width: var(--cell); height: var(--ds-control-height); flex: 0 0 var(--cell); }
.specimen .columns { display: flex; flex-wrap: wrap; gap: var(--cell); }
.specimen .columns > * { min-width: 0; }
.specimen fieldset { border: 0; padding: 0; margin: 0; }
.specimen legend { padding: 0; }
.specimen label { display: flex; align-items: flex-end; gap: calc(var(--cell) / 2); min-height: var(--cell); }
.specimen ds-panel { height: calc(10 * var(--cell)); }
</style>Text badges and icon-only badges use the same compact line.
<section class="specimen">
<ds-row class="line" ><ds-badge icon="star">Selected</ds-badge><ds-badge icon="lock">Members</ds-badge><ds-badge icon="archive" icon-only aria-label="Archived">Archived</ds-badge></ds-row>
</section>
<style>
.specimen { width: 100%; min-width: 0; --cell: calc(20px * var(--sf, 1)); }
.specimen .line { width: 100%; }
.specimen .grow { flex: 1; min-width: 0; }
.specimen .muted { color: var(--ds-text-color-muted); }
.specimen .mono { --ds-typeface-regular: var(--ds-typeface-mono); font-variant-numeric: tabular-nums; }
.specimen .value { width: calc(4 * var(--cell)); text-align: right; }
.specimen .mark { display: inline-flex; align-items: flex-end; width: var(--cell); height: var(--ds-control-height); flex: 0 0 var(--cell); }
.specimen .columns { display: flex; flex-wrap: wrap; gap: var(--cell); }
.specimen .columns > * { min-width: 0; }
.specimen fieldset { border: 0; padding: 0; margin: 0; }
.specimen legend { padding: 0; }
.specimen label { display: flex; align-items: flex-end; gap: calc(var(--cell) / 2); min-height: var(--cell); }
.specimen ds-panel { height: calc(10 * var(--cell)); }
</style>