Buttons

Pressed highlight toggle

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

Using Pressed highlight toggle

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

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: accentColor, size, skin, pressed, disabled

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

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.

2699Inset sheen buttonButtonsA pale utility button with a hairline border, a one pixel highlight along its top edge and a pressed state that flips the sheen inward.

2599Lozenge swipe highlightButtonsA bare monospace label with a colored lozenge parked at its right that slides across and stretches into a full highlight on hover.

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.

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

2466Add Then Confirm ChipButtonsA dark chip with a warm label whose plus rocks side to side on hover, then rotates into a tick and reports the item added.