UI chrome buttons
Tiny toolbar, table, and route chrome controls.
2xsxssmmd
--primitive-size-ui-2xs2xs / 24px--primitive-size-ui-xsxs / 28px--primitive-size-ui-smsm / 32px--primitive-size-ui-mdmd / 36pxPrimitive sizing scale
Named component sizes for buttons, icon buttons, pills, chips, badges, cards, rows, fields, icon wells, and media frames so downstream pages stop guessing dimensions.
Production answer
Primitive sizing scale is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Primitive sizing scale states
Generative search brief
Primitive sizing scale: Named component sizes for buttons, icon buttons, pills, chips, badges, cards, rows, fields, icon wells, and media frames so downstream pages stop guessing dimensions.
Component-size tokens
One scale for every control family
The scale mirrors the current code: small shadcn-style chrome controls, 44px-plus command buttons, compact icon tools, dense rows, and larger reusable card/media frames.
Command buttons
Primary app actions, forms, destructive actions, and CTAs.
smmdlg
--primitive-size-command-smsm / 44px--primitive-size-command-mdmd / 48px--primitive-size-command-lglg / 56pxIcon buttons
Icon-only controls, tool buttons, and compact action wells.
xssmmdlgxl
--primitive-size-icon-button-xsxs / 24px--primitive-size-icon-button-smsm / 28px--primitive-size-icon-button-mdmd / 32px--primitive-size-icon-button-lglg / 36px--primitive-size-icon-button-xlxl / 44pxPills and chips
Badges, tabs, filters, facets, states, and segmented labels.
smmdlg
--primitive-size-pill-smsm / 24px--primitive-size-pill-mdmd / 28px--primitive-size-pill-lglg / 32pxRows
List rows, table rows, setting rows, and dense operational records.
smmdlg
--primitive-size-row-smsm / 36px--primitive-size-row-mdmd / 44px--primitive-size-row-lglg / 56pxFields
Inputs, selects, textareas, search fields, and filter controls.
smmdlg
--primitive-size-field-smsm / 36px--primitive-size-field-mdmd / 44px--primitive-size-field-lglg / 52pxIcon wells
Glyph containers for cards, actions, navigation, and data states.
smmdlg
--primitive-size-icon-well-smsm / 32px--primitive-size-icon-well-mdmd / 40px--primitive-size-icon-well-lglg / 48pxCards
Reusable card minimum heights before a route adds content density.
card smcard mdcard lg
--primitive-card-min-smcard sm / 160px--primitive-card-min-mdcard md / 220px--primitive-card-min-lgcard lg / 320pxMedia frames
Thumbnails, card media, and hero frames with named responsive limits.
thumbcardhero
--primitive-media-thumbthumb / 96px--primitive-media-cardcard / 168px--primitive-media-herohero / 420pxUsage matrix
Where each size family applies
| Family | Contract | Primary consumers |
|---|---|---|
| Button | 24/28/32/36 for chrome; 44/48/56 for commands | Actions |
| Icon button | 24/28/32/36/44 square wells | Actions / navigation / file browser |
| Pill | 24/28/32 height with pill radius | Selection / feedback / data display |
| Card | 160/220/320 min-height families | Surfaces / data display / marketing |
| Row | 36/44/56 row rhythm | Tables / file browser / search |
| Field | 36/44/52 field rhythm | Forms / search / filters |
| Icon well | 32/40/48 wells, glyph separate from well | Icons / actions / cards |
| Media frame | 96 thumb, 168 card, 420 hero | Media / section patterns |