Buttons

Pressable icon toggle

A button with an icon and label that stays visually pressed once clicked, for a standalone on or off action such as muting or bolding.

Using Pressable icon toggle

A button with an icon and label that stays visually pressed once clicked, for a standalone on or off action such as muting or bolding.

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: label, pressed, variant

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

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

1647Pressed highlight toggleButtonsA two state icon button that keeps its pressed state visible with a rounded highlight block growing behind the glyph from the centre out.

1936Chevron flip tileButtonsA square icon tile whose chevron hinges flat and reopens pointing the other way, each half pivoting on the joint where they meet.

1631Day night sweep toggleButtonsAn icon button that cycles a settings panel between light, dark and automatic, repainting it with a hard clipped edge that sweeps across instead of a fade.

1640Latching icon toggleButtonsA 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.

2512Plus to cross tileButtonsA small square tile carrying a plus sign that spins forty five degrees into a close cross and swells a fraction as it turns.