Flip Button

PRONew

Preview live, install via shadcn or copy the source.

Installation

This will install the component and its dependencies automatically.

PRO COMPONENT

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

flip-button-usage.tsx• TSX

Name	Type	Default	Required	Description
frontText	string	—	Yes	Text on the front face.
backText	string	—	No	Text on the back face — defaults to frontText.
variant	"default" \| "primary" \| "outline" \| "ghost" \| "amber" \| "secondary"	default	No	Visual variant.
size	"default" \| "sm" \| "lg" \| "icon"	default	No	Size preset.
icon	React.ReactNode	—	No	Optional icon beside text on both faces.
duration	number	0.38	No	Flip animation duration (s).
ease	string	power3.inOut	No	GSAP ease for flip.
flipOffset	number	100	No	Y percent offset for flip.
variantClassName	string	—	No	Override variant classes.
sizeClassName	string	—	No	Override size classes.
frontClassName	string	—	No	Classes for front layer.
backClassName	string	—	No	Classes for back layer.
sizerClassName	string	—	No	Classes for invisible sizer.
disableFlip	boolean	false	No	Disable flip animation.
className	string	—	No	Additional classes merged into the button.