Chip

Compact selectable label with an optional dismiss action.

Overview

  • Use chips for filters or removable selections. Use Badge for passive labels.

Aliases

tag chip, filter chip

When to use

  • Use Chip for compact filters, quick toggles, or selected metadata that the user can remove.
  • Use dismissal for removable selections.

When not to use

  • Do not use Chip for plain status labels; use Badge instead.
  • Use Button for actions that need a larger target or greater emphasis.

Structural parts

compact interactive token

root

Carries the selected or neutral surface treatment.

visible token label

label

Communicates the chosen filter or entity.

optional remove action

dismiss

Optional remove control after the label.

Public interface

Props
NameTypeDefaultDescription
tone'neutral' | 'brand' | 'success' | 'warning''neutral'Chooses the chip tone.
size'sm' | 'md''md'Chooses the chip size recipe.
labelstring—Visible chip label.
selectedbooleanfalseControlled selected state.
dismissiblebooleanfalseShows the remove control.
onChange(detail: { selected: boolean }) => void—Receives the new selected state.
onDismiss() => void—Receives dismissal.
themeThemeContract—Sets the theme used to resolve component styles.
Events
NamePayloadDescription
change{ selected: boolean }Fires with the selected state.
dismissvoidFires when the remove control is activated.
Slots
NameDescription
defaultChip is mostly prop-driven and uses the label prop as its main visible content.

Variants, sizes, and states

Variants

  • neutral: Default compact token.
  • brand: Branded emphasis for important filters or groups.
  • success: Positive or accepted state token.
  • warning: Cautionary or attention-seeking token.

Sizes

  • sm: Tight compact token
  • md: Default chip size

States

  • rest: Neutral chip state
  • selected: Active or chosen state
  • dismissible: Shows a remove control

Accessibility

Semantics

  • Interactive chips expose selection or dismissal controls.

Keyboard

  • Selected and dismiss interactions must stay keyboard reachable.

Screen readers

  • Visible label and optional remove action need clear naming.

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-chip-gap
clamp(0.563rem, 0.5156rem + 0.208vw, 0.703rem)

button

--dk-chip-bg
#d7e9ff
--dk-chip-fg
#000f4d
--dk-chip-border
#2072e4
--dk-chip-radius
999px
--dk-chip-gap
clamp(0.563rem, 0.5156rem + 0.208vw, 0.703rem)
--dk-chip-block-size
40px
--dk-chip-inline-padding
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-chip-font-size
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-chip-font-weight
650
--dk-chip-dismiss-size
24px

leading

--dk-chip-leading-size
0.85rem

label

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

dismiss

--dk-chip-dismiss-size
24px

Examples

Starter

Selected token

A compact selected choice.

<Chip tone="brand" label="Priority" selected={true} />

Common patterns

Removable token

Dismissible chips work well for selected filters or entities.

<Chip tone="neutral" label="Assigned to me" dismissible={true} onDismiss={() => console.log('Dismissed')} />

Edge cases

Cautionary token

Warning tone can flag a risky or incomplete state in a compact way.

<Chip tone="warning" label="Needs review" />

Mathematical fixtures

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

neutral

pass

size=md|tone=neutral

  • Evidence: mathematical
  • Coverage: complete (3 / 3 declared kinds evaluated)
  • Declared: contrast, target, layout
  • Evaluated: contrast, target, layout
  • Contrast: 90.8 Lc
  • Target: 40 px
  • Layout: button · single-line 53 px single-line estimate; 53 px minimum width
    120 px: pass 200 px: pass

brand-selected

pass

size=md|tone=brand

  • Evidence: mathematical
  • Coverage: complete (3 / 3 declared kinds evaluated)
  • Declared: contrast, target, layout
  • Evaluated: contrast, target, layout
  • Contrast: 89.9 Lc
  • Target: 40 px
  • Layout: button · single-line 53 px single-line estimate; 53 px minimum width
    120 px: pass 200 px: pass

danger

pass

size=sm|tone=danger

  • Evidence: mathematical
  • Coverage: complete (3 / 3 declared kinds evaluated)
  • Declared: contrast, target, layout
  • Evaluated: contrast, target, layout
  • Contrast: 80.5 Lc
  • Target: 36 px
  • Layout: button · single-line 53 px single-line estimate; 53 px minimum width
    120 px: pass 200 px: pass