Flip Button

A button that flips between two states with an accompanying animation.

Pumki UI

Installation

1import { FlipButton } from '@/components/pumki-ui/buttons/flip';

1<FlipButton frontText="Hello Pumki!" backText="Love you Pumki" />

Use the `from` prop to specify the direction of the flip animation.

Pumki UI

Prop	Type	Default	Description
`from?`	`string`	`top`	Direction of flip animation
`backClassName?`	`string`	-	Class for back side
`frontClassName?`	`string`	-	Class for front side
`className?`	`string`	-	Class for root element
`transition?`	`Transition`	`{ type: "spring", stiffness: 280, damping: 20 }`	Animation config
`backText`	`string`	-	Text for back side
`frontText`	`string`	-	Text for front side