Buttons

Overshoot icon button

A 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.

Using Overshoot icon button

A 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.

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, slide, springy, radius

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

2714Expanding icon pillButtonsA round icon button that stretches into a labelled pill on hover, trading its glyph for a word as an accent fill arrives.

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.

2523Label swap slide buttonButtonsA bordered pill that swaps its whole contents on hover: the resting row slides up and out while a second row with its own icon and colour slides in from below.

2521Ring halo pill buttonButtonsA pill button that keeps a clear gap around its colored core, fills that gap with a lightened accent ring on hover or keyboard focus, and squeezes inward while pressed.

2485Rocking icon CTAButtonsA solid accent pill whose leading calendar icon rocks like a metronome on hover and, when clicked, draws a tick and swaps the wording to a confirmed label before settling back.

2513Slide under download buttonButtonsA labelled button that slides a bright action tray out from under its plate on hover or focus, with a bobbing download arrow inside the tray.