Badge

Status or category label with semantic tones.

Overview

  • Use a badge for a passive label. Use Chip when the label needs selection or dismissal.

Aliases

pill, status pill

When to use

  • Use Badge to label state, environment, phase, or system intent in a compressed area.
  • Use soft or outline emphasis for supporting labels.

When not to use

  • Do not use Badge as a clickable filter token; use Chip instead.
  • Do not replace longer guidance or system messaging with a terse badge.

Structural parts

status shell

root

Carries the tone, emphasis, and compact shape.

supporting slot

leading

Optional symbol or marker before the label.

status text

label

Concise status label.

Public interface

Props
NameTypeDefaultDescription
tone'neutral' | 'brand' | 'success' | 'warning' | 'danger''neutral'Chooses the semantic status tone.
emphasis'soft' | 'solid' | 'outline''soft'Chooses the visual weight of the badge.
size'sm' | 'md''md'Sets the component size.
themeThemeContract—Sets the theme used to resolve component styles.
Slots
NameDescription
defaultVisible badge label.
leadingOptional symbol before the label.

Variants, sizes, and states

Variants

  • soft: Low-emphasis filled badge.
  • solid: Higher-emphasis filled badge for stronger status signal.
  • outline: Outlined badge for lower fill weight and clearer edge definition.

Sizes

  • sm: Tight compact label for dense UI.
  • md: Default badge size for dashboards and cards.

States

  • rest: Badges are intentionally non-interactive and mostly static.

Accessibility

Semantics

  • Renders as static text content without interactive semantics.

Keyboard

  • Badges are not interactive.

Screen readers

  • The badge content is announced as ordinary text in document order.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-badge-bg
#d7e9ff
--dk-badge-fg
#000f4d
--dk-badge-border
#2072e4
--dk-badge-border-width
1px
--dk-badge-radius
999px
--dk-badge-gap
clamp(0.563rem, 0.5156rem + 0.208vw, 0.703rem)
--dk-badge-block-size
30px
--dk-badge-inline-padding
clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem)

leading

--dk-badge-leading-size
0.82rem

label

--dk-badge-label-color
inherit
--dk-badge-label-size
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-badge-label-weight
650

Implementation notes

  • Badge has no selection or dismissal behavior.

Examples

Starter

Product phase

A compact label for a product phase or environment.

<Badge tone="brand" emphasis="soft" size="md">Beta</Badge>

Common patterns

System status

A stronger success badge for dashboards and operational summaries.

<Badge tone="success" emphasis="solid" size="sm">Healthy</Badge>

Edge cases

Marker plus label

Use a leading marker sparingly when fast scanning matters.

<Badge tone="warning" emphasis="outline"><svelte:fragment slot="leading">!</svelte:fragment>Needs review</Badge>

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

neutral-soft

pass

emphasis=soft|size=md|tone=neutral

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 90.8 Lc
  • Layout: root · wrap-anywhere 105 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

neutral-solid

pass

emphasis=solid|size=md|tone=neutral

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 100.1 Lc
  • Layout: root · wrap-anywhere 105 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

neutral-outline

pass

emphasis=outline|size=md|tone=neutral

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 105 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

brand-soft

pass

emphasis=soft|size=md|tone=brand

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 89.9 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

brand-solid

pass

emphasis=solid|size=md|tone=brand

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 89.9 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

brand-outline

pass

emphasis=outline|size=md|tone=brand

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

success-soft

pass

emphasis=soft|size=md|tone=success

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 135 px single-line estimate; 45 px minimum width
    120 px: pass 2 lines; 53 px estimated height200 px: pass 1 line; 30 px estimated height

success-solid

pass

emphasis=solid|size=md|tone=success

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 135 px single-line estimate; 45 px minimum width
    120 px: pass 2 lines; 53 px estimated height200 px: pass 1 line; 30 px estimated height

success-outline

pass

emphasis=outline|size=md|tone=success

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 135 px single-line estimate; 45 px minimum width
    120 px: pass 2 lines; 53 px estimated height200 px: pass 1 line; 30 px estimated height

warning-soft

pass

emphasis=soft|size=md|tone=warning

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

warning-solid

pass

emphasis=solid|size=md|tone=warning

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 59.8 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

warning-outline

pass

emphasis=outline|size=md|tone=warning

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

danger-soft

pass

emphasis=soft|size=md|tone=danger

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

danger-solid

pass

emphasis=solid|size=md|tone=danger

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 80.5 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height

danger-outline

pass

emphasis=outline|size=md|tone=danger

  • Evidence: mathematical
  • Coverage: complete (2 / 2 declared kinds evaluated)
  • Declared: contrast, layout
  • Evaluated: contrast, layout
  • Contrast: 98.5 Lc
  • Layout: root · wrap-anywhere 120 px single-line estimate; 45 px minimum width
    120 px: pass 1 line; 30 px estimated height200 px: pass 1 line; 30 px estimated height