Buttons

Lozenge swipe highlight

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

Using Lozenge swipe highlight

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

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, accent, dotSize, springiness, durationMs

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

2580Overshoot icon buttonButtonsA pale pill with a large illustrated glyph parked in its left end that tugs outward past the rim and springs back on hover or focus.

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.

1926Brightening gradient buttonButtonsA deep two-tone chip whose vertical wash climbs to a much brighter pair of the same family on hover, with a fixed glass highlight along its top edge.

2715Glide swap buttonButtonsA fixed width button that slides its label off the right edge while the glyph glides into the centre, all sitting on a hard coloured ledge the button drops onto when pressed.

2476Icon reveal chipButtonsA small outlined chip that floods with its accent on hover while the label slides left and a hidden glyph fades in from the right.

2630Keycap lift buttonButtonsA mechanical-key button that lifts on hover, keeps a solid bottom lip, and swaps its whole shadow stack inward when it is pressed.