Component gallery

FieldChip

Tokens for field and file names: mono identity, mid-truncation, and the quiet clickable shape.

Field tone (default)

The name of a data field, wherever one is shown
part_numberbrandfitment_notes

File tone

Filenames; the apps override it to quiet gray by ruling
brake-pads-q3.xlsxthe shipped quiet-gray override

Clickable

onClick makes the chip a button, sized to its content

Mapped attributes cell

A table cell of chips with a +N overflow once the row runs out of room
Part typeMapped attributes
Wheels
DiameterWidthBackspacing+4

Field label with its schema key

The label reads for a human; the chip beside it never loses the raw field key
Manufacturerbrand

Attribute mapping review

Source column, an arrow, the schema field it resolves to, and a status pill per row
Mfg_PartNopart_numberConfirmed
Backspace_INbackspacingNeeds review

Queued file with remove

A file chip carries the name and size; Remove clears it from the queue
  • brake-pads-q3.xlsx412 KB
  • fitment-update.csv88 KB

Styling slots

FieldChip exposes one loose className, not a full slot map
className
the chip itself
@versable-git/ui · all states, both themes