Buttons

Diagonal wedge button

A squared button filled by a triangular wedge that grows along the diagonal until it covers the whole face.

Using Diagonal wedge button

A squared button filled by a triangular wedge that grows along the diagonal until it covers the whole face.

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, duration, rim, padX

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

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.

2378Left Edge Fill ButtonButtonsA soft rounded slab where a colored panel grows out of the left edge to fill the whole shape on hover, flipping the label as it passes.

1837Sweep invert buttonButtonsA deep navy button whose bright fill sweeps in from the right edge and flips the label to the dark tone with a quick squeeze.

2694Word tumble buttonButtonsHovering rolls the uppercase label over itself inside a clipped slot while a diagonal accent fill sweeps the panel behind it and a difference blend flips the word color.

2683Arrow wipe buttonButtonsA pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses.

2684Converging chevron buttonButtonsTwo arrow shaped plates fly in from opposite sides and meet in the middle of the button, sealing it shut behind the label.