Button Lab
Tune a shared two-layer button—stationary chassis, moving face, and directional press/release motion—then define only the semantic paint differences for each type. Every adjustable value is locked to an approved design token.
Experimental proposals stay scoped to this page. Nothing here changes the production Button or SMARTprint navigation until the foundation is approved.
Shared foundation
One physical contract
Every tactile button now has a stationary chassis and an independently moving face. Tune that shared construction here; type cards only change semantic paint and whether they participate in depth.
Physical anatomy
Face over chassis
The dark chassis stays fixed. The painted face rises above it, lifts farther on hover, and travels down toward the chassis while pressed.
- Up
- 4px
- Hover
- 8px
- Down
- 0px
The visible side wall is the Primary type’s Base / side surface.
Tactile depth
Moving face + stationary chassisPress & release motion
Fast down, expressive returnShape & content
Inherited by every typeTactile distances use the approved spacing scale.The controls map spacing/none, spacing/2xs, spacing/xs, spacing/sm, and spacing/md directly to 0 / 4 / 8 / 12 / 16px physical offsets. The lab enforces Down ≤ Up ≤ Hover. Once the physical feel is approved, we can decide whether the selected spacing values need semantic Button depth aliases in Foundations. Button sizing remains 32 / 40 / 48px until its separate token mismatch is resolved.
Motion replay
Watch a state change animate
Replay press and hover on the live foundation instead of chasing them with the pointer. Real time answers “is it fast enough?”; slow-mo shows what the curve is doing at the landing. Loop it while you drag the motion sliders above.
Tooltip
Reveal timing
The real product tooltip over tactile specimens. Tune the hover delay and placement; the chip’s in/out motion already runs on motion tokens.
Chip motion already runs on motion tokens (base-decelerate in, fast-accelerate out). The 200 ms delay ships as a constant in ui/tooltip.tsx — not a token yet. Hover across the row: after the first chip opens, its neighbors open with no delay.
Selected
Latched — the face stays down
A selected tactile button holds its Down position: the pressed physics become the selected paint, and hover cannot lift a latched face. Click to latch and release.
Target specimen
SMARTprint navigation icon buttons
This specimen inherits Secondary + Icon-only. It has no navigation-only visual override, so tuning the neutral recipe improves every toolbar action coherently.
Print actions
Primary
Foundation + semantic overridesHighest-emphasis action. Semantic brand treatment on the shared physical foundation.
Type overridesOnly the differences from the shared foundation
Geometry, sizing, typography, focus, disabled behavior, and motion still inherit. Flat types hide the chassis and keep the face at zero lift.
Secondary
Foundation + semantic overridesNeutral supporting action. This is the proposed recipe for navigation icon buttons.
Type overridesOnly the differences from the shared foundation
Geometry, sizing, typography, focus, disabled behavior, and motion still inherit. Flat types hide the chassis and keep the face at zero lift.
Outline
Compatibility alias → secondaryCompatibility alias of Secondary. It is shown explicitly, but cannot drift into a separate recipe.
Outline is retained by the code API as a compatibility alias. It always follows Secondary and has no independent overrides.
Secondary Danger
Foundation + semantic overridesNeutral at rest; danger appears only when the user approaches the destructive action.
Type overridesOnly the differences from the shared foundation
Geometry, sizing, typography, focus, disabled behavior, and motion still inherit. Flat types hide the chassis and keep the face at zero lift.
Danger
Foundation + semantic overridesHigh-emphasis destructive action. It shares mechanics with Primary and changes only tone.
Type overridesOnly the differences from the shared foundation
Geometry, sizing, typography, focus, disabled behavior, and motion still inherit. Flat types hide the chassis and keep the face at zero lift.
Ghost
Foundation + semantic overridesLow-emphasis action. It inherits geometry and motion but intentionally opts out of depth.
Type overridesOnly the differences from the shared foundation
Geometry, sizing, typography, focus, disabled behavior, and motion still inherit. Flat types hide the chassis and keep the face at zero lift.
Text
Foundation + semantic overridesCompact translucent action. It keeps the shared shape but stays visually flat.
Type overridesOnly the differences from the shared foundation
Geometry, sizing, typography, focus, disabled behavior, and motion still inherit. Flat types hide the chassis and keep the face at zero lift.
Link
Foundation + semantic overridesNavigation action in a button API. It inherits accessibility and typography, not a control surface.
Type overridesOnly the differences from the shared foundation
Geometry, sizing, typography, focus, disabled behavior, and motion still inherit. Flat types hide the chassis and keep the face at zero lift.
Up the stack
What changes—and what does not
- Foundation
- Face/chassis anatomy, lift positions, geometry, focus, and motion.
- Visual type
- Face paint, chassis tone, foreground, rim, and tactile participation.
- Content mode
- Label, icon-only, or split composition. It does not create a new skin.
- Context
- Navigation and toolbars arrange buttons; they do not restyle them.