Badge

Status labels

<div class="dsgn-cluster">
  <span class="dsgn-badge">Draft</span><span class="dsgn-badge" data-intent="accent">Sent</span>
  <span class="dsgn-badge" data-intent="success">Paid</span><span class="dsgn-badge" data-intent="warning"><span class="dsgn-icon" aria-hidden="true">schedule</span>Due soon</span>
  <span class="dsgn-badge" data-intent="danger" data-variant="solid">Overdue</span>
</div>

With close

For active filters or picked values. The badge stays 20 px tall; the close button has a 24 × 24 hit area. The app removes the badge and moves focus to the next one. A tag inside a field at control height is a Chip.

<div class="dsgn-cluster" role="group" aria-label="Active filters">
  <span class="dsgn-badge" data-intent="accent">Status: Paid<button type="button" class="dsgn-badge-remove" aria-label="Remove filter Status: Paid"><span class="dsgn-icon" aria-hidden="true">close</span></button></span>
  <span class="dsgn-badge"><span class="dsgn-icon" aria-hidden="true">person</span>Novama s.r.o.<button type="button" class="dsgn-badge-remove" aria-label="Remove filter Novama s.r.o."><span class="dsgn-icon" aria-hidden="true">close</span></button></span>
  <span class="dsgn-badge" data-intent="danger" data-variant="solid">Overdue<button type="button" class="dsgn-badge-remove" aria-label="Remove filter Overdue"><span class="dsgn-icon" aria-hidden="true">close</span></button></span>
</div>

Usage

With close (an active filter, a selected value; the app removes the badge and moves focus on):

Status label; only the close button is interactive. Caption type, fixed size (does not follow Density): 16 + 2 × 2 = 20 px with or without icon and close — both are 16 px (one caption line). A start icon or the close button tightens that side to space-4. The close button's hit area is 24 × 24 (WCAG 2.5.8). For a tag inside a field or a filter bar at control height use Chip.

Attributes

Details

Classes

.dsgn-badge .dsgn-icon .dsgn-badge-remove

Tokens used

--dsgn-accent-solid --dsgn-accent-solid-text --dsgn-accent-subtle --dsgn-accent-text --dsgn-danger-solid --dsgn-danger-solid-text --dsgn-danger-subtle --dsgn-danger-text --dsgn-focus --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-caption --dsgn-font-weight-medium --dsgn-line-height-caption --dsgn-neutral-solid --dsgn-neutral-solid-text --dsgn-neutral-subtle --dsgn-neutral-text --dsgn-radius-m --dsgn-radius-s --dsgn-space-2 --dsgn-space-4 --dsgn-space-8 --dsgn-success-solid --dsgn-success-solid-text --dsgn-success-subtle --dsgn-success-text --dsgn-warning-solid --dsgn-warning-solid-text --dsgn-warning-subtle --dsgn-warning-text

In Figma

Badge

Import alone

dsgn.systems/components/badge.css