Smallest Design System

Chip

Removable labels for multiselect comboboxes and inline body copy.

Medium

24px chip for combobox multiselect. md and sm use shadow-sm stroke only — no extra border.

Next.jsRemix

Fill

Chips invert the input surface: container (white) on primary fields, neutral on secondary fields. ComboboxChip picks this up from ComboboxChips variant automatically.

Primary field
Secondary field

Small

20px chip with tighter padding for dense multiselect fields.

Remix

Inline

20px chip with text-sm and neutral-100 fill + border to sit inline with body copy. mx-1 gives 4px side gap; vertical-align baseline keeps text aligned.

SelectedAstrofor this workspace.

In combobox

ComboboxChip accepts variant and inherits fill from ComboboxChips variant.

Best practices

When to use

  • Use md or sm chips inside Combobox multiselect fields. Use inline chips when a removable value sits inside body copy.
  • Use Pill for read-only status metadata that does not need removal.

Behavior

  • md and sm use shadow-sm stroke only. Fill inverts the input surface: white on primary fields, neutral-100 on secondary. Inline uses neutral-100 with border for body copy.
  • Always pair removable chips with an accessible remove control.
PreviousCheckboxNextCode