Buttons

Flip face button

A button with two faces that trades one for the other on a three dimensional turn, reversing from wherever it is when the pointer leaves.

Using Flip face button

A button with two faces that trades one for the other on a three dimensional turn, reversing from wherever it is when the pointer leaves.

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: axis, duration, accentColor, frontLabel, backLabel

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

2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.

1661Two face flip buttonButtonsA button with two stacked faces that rotate past each other in 3D on hover, the front tipping away toward a chosen edge while the back swings in to take its place.

1848Center out fill buttonButtonsAn outlined uppercase button whose accent fill opens from a hairline at the center out to both edges on hover or focus.

2314Charge Up Action ButtonButtonsA charcoal pill that lights into a saturated gradient key on hover, lifting off the surface while its mark turns and brightens.

2711Count Sweep CTAButtonsA compact dark call to action with a leading mark, a divider and a live tally, crossed by a slow diagonal light streak on hover.

2763Draining fill buttonButtonsA flooded button that drains out of one edge on hover, leaving a hollow outline with the label flipped to the accent.