Buttons

Sliding panel button

A bordered button whose second label rides in on a colored panel from the right edge, covering the first label completely.

Using Sliding panel button

A bordered button whose second label rides in on a colored panel from the right edge, covering the first label completely.

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, hoverLabel, accent, companion, 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

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.

2398Panel swallow buttonButtonsA button with a darker icon panel docked at one edge; on hover or keyboard focus the panel grows across the whole width and the label fades beneath it.

2416Rising arrow link buttonButtonsA read more button where the label slides sideways to open a gap and an arrow climbs into it from below the clipped bottom edge.

2703Skewed wipe swap buttonButtonsA button that swaps its label on hover or focus while a sheared accent panel wipes up across its face.

2040Slide out tabs buttonButtonsA download button with two dark caption tabs stacked behind it that slide out above and below on hover and pull halfway back when it is held.

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.