Component gallery

Chip

Small selectable tokens: sizes, tones, removable and toggleable shapes, and the ruled preset the toolbars use.

Applied filters on a list toolbar

The applied preset pairs the lg frame with text-sm type; each chip removes its own facet, Clear all removes them together
Filter
Module: Part Type
Status: Running

Pick catalogs to include in a re-run

A multi-select tag picker with a live selected count

1 of 4 catalogs selected

Accepted values in a schema table

Two chips show, the rest collapse into a plus-N chip with a tooltip
AttributeTypeAccepted values
Bolt PatternDropdown
FinishDropdown
MaterialDropdown
DiameterMeasurement-

Read-only tags on a job card

Chip carries the module and priority tags; StatusPill, not Chip, carries the run state
job_9421AC Delco Q3 · Aakarsh C.
Needs attention

3,412 rows, 88% matched to a Speedway part type.

Type-to-add catalog aliases

Enter commits a chip, Backspace on an empty field removes the last one
Catalog matching aliases
These names also match rows to AC Delco Q3 on import.

Single-select status filter

Icon=true swaps check and plus by selection state

Every color, every variant

8 colors by 4 style modifiers, the full matrix
solid
outline
ghost
soft

Chip sizes

xs through lg, the shared control scale

Icon, loading, and tooltip

A registry icon key, the loading spinner swap, and the no-op-when-empty tooltip

Skeleton, no border, and non-clickable

A placeholder chip, a borderless tag, and a plain chip with no onChange

Styling slots

Every className the component exposes, and what it reaches
className
the chip button
iconClassName
the leading icon
@versable-git/ui · all states, both themes