Chip shapes, side by side

Shape A is the chip's own size ladder at lg, the subordinate token look. Shape B is the ruled lg frame with text-sm, sitting at 28px beside the toolbar's 32px h-8 controls, one deliberate step down. The floating toggle flips themes. The mock's own filter rows show no applied chips at all; both shapes here are the opt-in path behind the chips knob.

The three species

One family, three jobs

Pick by job, never by look alone

Module: Extract

Chip in the ruled lg frame, via its presets="applied" shorthand: an applied filter value, removable. The frame is size lg plus text-sm by ruling; lg alone is the token look.

part_numberFieldChip: the name of a data field or file, quiet by design, never a control.

Chip at its own ladder sizes: selectable tokens, tags, and inline state.

In the toolbar, the decisive context

Shape A: token chips

Same facets, same applied values; only the chip shape differs

Filter

Module · 2

All statuses

Extract

Enhance

2 filter values applied

Shape B: lg frame, toolbar type (text-sm)

Same facets, same applied values; only the chip shape differs

Filter

Module · 2

All statuses

Extract

Enhance

2 filter values applied

Shape B composites, with the ruled prefix convention

The full composite: label, search, facets, prefixed chips, trailing buttons

Filter

Module · 2

Running

Module: Extract

Module: Enhance

Status: Running

3 filter values applied

Standalone chips in the ruled shape: themed, some with icons, all removable

Module: Extract

Job: Keizer June

Parts: Wheels

Errors: Missing

Criticals: Over 50

Owner: You

Every variant, every color

Shape A: variants and colors

solid

outline

ghost

soft

Shape B: variants and colors

solid

outline

ghost

soft

States: removable, selectable, icons, loading, skeleton, noBorder, tooltip

Shape A states

Wheels

Brakes

Filters

Shape B states

Wheels

Brakes

Filters

The size ladder against an h-8 control

xs, sm, md, lg, then shape B, beside a real Select

h-8 reference