Toggle Button
togglebutton__ideal__default
26 views
current
A button that holds its state. The corner morphs between checked and unchecked.
Issues#383#392closed
- #381 glimmer stickers draw bare components; the kit cells they reference render with their slots filledclosed · area:component · parity:catalog
- #383 glimmer-catalog labels have no room to grow when localizedopen · area:component · parity:catalog
- #392 The Glimmer kit publishes 9 cells no Glimmer component can be in: Disabled+Focused, and Hoveredopen · area:component · parity:known-difference
index as of 2026-09-16 06:33 UTC
View
Size
Exploded 3D
One sheet per visible drawing level. Structural-only
composables are kept in the next sheet's breadcrumb. Rides the SVG link and download.
Locale & text
Overlays
Overrides
Declared overrides — edit a value to re-render.
Compare14 variants of Toggle Button, against Figma

ideal/cell-state-enabled-size-large-toggle-true-40000113-408279.0%diff →
ideal/cell-state-focused-size-default-toggle-true-40000113-409287.3%diff →
ideal/cell-state-focused-size-large-toggle-true-40000113-411278.3%diff →
ideal/cell-state-pressed-size-default-toggle-true-40000113-410287.9%diff →
ideal/cell-state-pressed-size-large-toggle-true-40000113-412274.3%diff →
ideal/checked88.8%diff →
ideal/defaulton the stage92.0%diff →
ideal/default/size-large92.3%diff →
ideal/disabled90.5%diff →
ideal/disabled/size-largenot scored
ideal/focused86.6%diff →
ideal/focused/size-largenot scored
ideal/pressed88.4%diff →
ideal/pressed/size-largenot scored