04 / Controls
Commands stay tactile
Buttons, keycaps, chips, fields and selection controls share one measurable interaction contract.
36 / 44px heights
Button playground
Change the variant, height and availability; the geometry remains stable.
44px height2px border8px radius5px depth16px icon
Button states
The production command contract stays at JetBrains Mono 12/900, 44px high and 5px deep.
Production command inventory
The audit covers every current button family rather than only the primary CTA specimen.
| Family | Production owner | Height / depth | Contract |
|---|---|---|---|
| Primary action | .button | 44px / 5px | Lime keycap, optional leading icon |
| Secondary action | .button--ghost | 44px / 5px | Neutral face, same press physics |
| Detail action | .button--detail | 44px / 5px | Forward command with trailing arrow |
| Compact action | [data-size=compact] | 36px / 3px | Dense non-primary contexts only |
| Icon-only | share / theme / close | 44 × 44px / 4px | Accessible name required |
| Filter and sort | catalog-explorer.tsx | 44px / 4px | State lives in text and aria state |
| State tiles | pet-detail-preview.tsx | Content-driven / 4px | Sprite and label remain one target |
| Persistent tray | companion-tray.tsx | 44px minimum / 4px | Safe-area and layer owner |
| Footer destination | product-footer.tsx | 56px / 5px | Icon, label and direction cue |
Chips and badges
6px inner radius. Click to inspect a selected state.
Search and selection
The smart-search glyph stays inside the field; the select chevron keeps an 18px right inset.
Control contract
| Role | Height | Radius | Depth | Label |
|---|---|---|---|---|
| Compact command | 36px | 8px | 3px | Mono 11–12px |
| Default command | 44px | 8px | 4–5px | Mono 12px |
| Icon action | 44×44px | 8px | 4px | Accessible name |
| Primary mobile action | ≥44px | 8px | 5px | Never wraps |