Buttons

Rotating backer button

A dark plate with a tinted panel hidden just behind it that spins a half turn on hover while the light spilling past its edges spreads wider.

Using Rotating backer button

A dark plate with a tinted panel hidden just behind it that spins a half turn on hover while the light spilling past its edges spreads wider.

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, bloom, rotation, pressScale

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

2659Contrast Boost Frame ButtonButtonsA pale inner plate floats inside a thick painted frame, and hovering cranks the whole thing brighter and more saturated without moving anything.

1641Magnetic dust buttonButtonsA pill button surrounded by loose specks of dust that rush into its center on hover and drift back out to their own resting spots when released.

2680Offset plate buttonButtonsAn outlined button with a solid plate parked down and to the right; hovering slides the plate home so the two shapes lock into one.

2580Overshoot icon buttonButtonsA pale pill with a large illustrated glyph parked in its left end that tugs outward past the rim and springs back on hover or focus.

2545Plane tilt send buttonButtonsA dished send control whose paper plane tips up on hover and flies out of frame on click before the label resets.

2539Plinth lift buttonButtonsA heavy framed label plate on a checkered base that lifts diagonally off its plinth and takes on color when hovered or focused.