Buttons

Hard Shadow Button

A thick-outlined button that lifts off its solid offset shadow on hover and presses back into it on click.

Using Hard Shadow Button

A thick-outlined button that lifts off its solid offset shadow on hover and presses back into it on click.

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, borderWidth, offset

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

2482Offset shadow press buttonButtonsA flat outlined button that sits on a hard offset shadow and slides down into it when pressed, like a real key bottoming out.

2626Diagonal orb fill buttonButtonsOne oversized circle slides corner to corner across an outlined button, filling it on the diagonal, and darkens the instant you press.

2371Inset Edge PillButtonsA pale pill with a thin ring all round and a thicker lip along the bottom only, so it reads as a physical key that floods with color on hover.

2663Lifting hard shadow pillButtonsA thick outlined pill that drifts up and to the left on hover while its flat solid shadow stretches out underneath it, and presses flush against the page while held.

2633Offset bloom buttonButtonsA flat bright slab with no border that blooms a wide off-centre haze of its own colour on hover and compresses it when pressed.

2392Offset outline stackButtonsA bordered button face resting on stepped outline layers like a small pad of paper; hover slides the top sheet onto the stack and inverts its fill.