J3W1 / DESIGN SYSTEM
Button workbench
Inspect maintained specimens, states, viewport behavior, anatomy and contrast.
Source revision 1faefcf014c8bf01a6b27308ea796da968773a81
Component specification · Open isolated preview
Controls use maintained specimens. A forced focus ring is a visual simulation; it does not move keyboard focus. Profile previews keep their published approval status. Sample text stays in this page unless explicitly included in a shared link.
Actual build: 1faefcf014c8bf01a6b27308ea796da968773a81 Source snapshot: sha256-Rmx7xmnG7av1vNa+62ALyQRtQnwAiuz2G6L1Ho0MbH4=
Machine contract · Report an issue without JavaScript
Canonical specimen
JavaScript adds the controls below; the complete specification and this specimen remain available without it.
Live specimen
The iframe has its own viewport. Wide previews scroll inside this inspection region. Resizing is not browser zoom, device emulation, or an accessibility pass. Initial configuration is reproducible; subsequent interactions are temporary.
Anatomy and measurements
Select a documented part. The overlay does not capture input or change layout.
| Metric / mapping | Declared role | Resolved value | Measured value / result |
|---|
Contrast lab
Uses the specification’s contrast engine. Choose a context explicitly; a ratio does not establish semantic suitability or overall accessibility. Large text means at least 18.66px bold or 24px regular. Alpha requires the selected opaque underlay.
Motion inspection
Replay the maintained hover background transition. Inspection speed is explicitly slowed to one quarter; system reduced motion always wins. Playback stops when the workbench is hidden.
Share this configuration
Prepare a public issue draft
Describe the problem and review the resulting draft. Entered specimen text, storage, screenshots, and unrelated URLs are not collected. No issue is submitted automatically.
Open GitHub directly (also works without JavaScript) · Search existing issues
Static motion endpoints
Default and documented hover backgrounds, available without JavaScript. Property: background-color; duration: 80ms from motion.duration.fast; easing: ease (CSS default). Reduced motion uses instant endpoints.