Buttons

Offset outline stack

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

Using Offset outline stack

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

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: accent, label, offset, layers, duration

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

1655Stacked ripple buttonButtonsAn outlined button that keeps every ripple alive at once, so quick repeated taps overlap into layered rings.

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.

2597Edge wipe invertButtonsAn outlined button whose solid fill wipes in from one edge and inverts the label as it passes underneath.

1696Focus halo buttonButtonsA solid button that inverts to an outline on pointer hover and grows two stacked translucent rings the moment it takes keyboard focus.

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

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.