Buttons

Latching icon toggle

A square button that latches on and off: a filled plate fades in, the glyph swaps for its matched counterpart, and a caption beside it spells the state out in words.

Using Latching icon toggle

A square button that latches on and off: a filled plate fades in, the glyph swaps for its matched counterpart, and a caption beside it spells the state out in words.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: glyph, startPressed, accent, size, showCaption

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2115Bookmark save chipButtonsA compact save chip whose bookmark mark snaps from outline to filled and gives one small tug downward the moment an item is saved.

2473Follow latch chipButtonsA follow chip that previews its filled state on hover and latches there on click, swapping to an unfollow prompt in a warning tint when hovered again.

1634Format toggle buttonButtonsAn icon button that holds an on or off state, fading a rounded plate in behind its glyph when pressed.

1644Press plate toggleButtonsA bare two-state button whose filled plate cross-fades in behind its content when pressed, with the state readable and settable from outside the button itself.

2575Bookmark save toggleButtonsA compact save chip whose bookmark glyph fills solid and keeps a hairline border once the item is saved.

2550Captioned Like ButtonButtonsAn icon-only heart button that reveals a caption rising from beneath on hover or focus, and fills solid with a quick overshoot when liked.