Flip Button

Animated flip button with customizable text and transitions. Perfect for React applications requiring interactive buttons with Next.js integration and TypeScript support.

Motion

Loading component...

'use client';import * as React from 'react';import {  type HTMLMotionProps,  type Transition,  type Variant,  motion,} from 'motion/react';import { cn } from '@/lib/utils';type FlipDirection = 'top' | 'bottom' | 'left' | 'right';type FlipButtonProps = HTMLMotionProps<'button'> & {  frontText: string;  backText: string;  transition?: Transition;  frontClassName?: string;  backClassName?: string;  from?: FlipDirection;};const DEFAULT_SPAN_CLASS_NAME =  'absolute inset-0 flex items-center justify-center rounded-lg';function FlipButton({  frontText,  backText,  transition = { type: 'spring', stiffness: 280, damping: 20 },  className,  frontClassName,  backClassName,  from = 'top',  ...props}: FlipButtonProps) {  const isVertical = from === 'top' || from === 'bottom';  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';  const frontOffset = from === 'top' || from === 'left' ? '50%' : '-50%';  const backOffset = from === 'top' || from === 'left' ? '-50%' : '50%';  const buildVariant = (    opacity: number,    rotation: number,    offset: string | null = null,  ): Variant => ({    opacity,    [rotateAxis]: rotation,    ...(isVertical && offset !== null ? { y: offset } : {}),    ...(!isVertical && offset !== null ? { x: offset } : {}),  });  const frontVariants = {    initial: buildVariant(1, 0, '0%'),    hover: buildVariant(0, 90, frontOffset),  };  const backVariants = {    initial: buildVariant(0, 90, backOffset),    hover: buildVariant(1, 0, '0%'),  };  return (    <motion.button      data-slot="flip-button"      initial="initial"      whileHover="hover"      whileTap={{ scale: 0.95 }}      className={cn(        'relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none',        className,      )}      {...props}    >      <motion.span        data-slot="flip-button-front"        variants={frontVariants}        transition={transition}        className={cn(          DEFAULT_SPAN_CLASS_NAME,          'bg-muted text-black dark:text-white',          frontClassName,        )}      >        {frontText}      </motion.span>      <motion.span        data-slot="flip-button-back"        variants={backVariants}        transition={transition}        className={cn(          DEFAULT_SPAN_CLASS_NAME,          'bg-primary text-primary-foreground',          backClassName,        )}      >        {backText}      </motion.span>      <span className="invisible">{frontText}</span>    </motion.button>  );}export { FlipButton, type FlipButtonProps, type FlipDirection };

Installation

npx shadcn@latest add https://www.shadcn.io/registry/flip-button.json

npx shadcn@latest add https://www.shadcn.io/registry/flip-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/flip-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/flip-button.json

Features

Smooth flip animations with configurable spring transitions and 3D perspective effects
Four flip directions supporting top, bottom, left, and right orientations using Motion
Customizable styling with separate front and back text appearance options
TypeScript support with complete interface definitions for all props
shadcn/ui integration using design tokens and className merging utilities
Interactive feedback with hover states and tap animations for enhanced UX

Examples

Flip Direction Variants

Loading component...

'use client';import * as React from 'react';import {  type HTMLMotionProps,  type Transition,  type Variant,  motion,} from 'motion/react';import { cn } from '@/lib/utils';type FlipDirection = 'top' | 'bottom' | 'left' | 'right';type FlipButtonProps = HTMLMotionProps<'button'> & {  frontText: string;  backText: string;  transition?: Transition;  frontClassName?: string;  backClassName?: string;  from?: FlipDirection;};const DEFAULT_SPAN_CLASS_NAME =  'absolute inset-0 flex items-center justify-center rounded-lg';function FlipButton({  frontText,  backText,  transition = { type: 'spring', stiffness: 280, damping: 20 },  className,  frontClassName,  backClassName,  from = 'top',  ...props}: FlipButtonProps) {  const isVertical = from === 'top' || from === 'bottom';  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';  const frontOffset = from === 'top' || from === 'left' ? '50%' : '-50%';  const backOffset = from === 'top' || from === 'left' ? '-50%' : '50%';  const buildVariant = (    opacity: number,    rotation: number,    offset: string | null = null,  ): Variant => ({    opacity,    [rotateAxis]: rotation,    ...(isVertical && offset !== null ? { y: offset } : {}),    ...(!isVertical && offset !== null ? { x: offset } : {}),  });  const frontVariants = {    initial: buildVariant(1, 0, '0%'),    hover: buildVariant(0, 90, frontOffset),  };  const backVariants = {    initial: buildVariant(0, 90, backOffset),    hover: buildVariant(1, 0, '0%'),  };  return (    <motion.button      data-slot="flip-button"      initial="initial"      whileHover="hover"      whileTap={{ scale: 0.95 }}      className={cn(        'relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none',        className,      )}      {...props}    >      <motion.span        data-slot="flip-button-front"        variants={frontVariants}        transition={transition}        className={cn(          DEFAULT_SPAN_CLASS_NAME,          'bg-muted text-black dark:text-white',          frontClassName,        )}      >        {frontText}      </motion.span>      <motion.span        data-slot="flip-button-back"        variants={backVariants}        transition={transition}        className={cn(          DEFAULT_SPAN_CLASS_NAME,          'bg-primary text-primary-foreground',          backClassName,        )}      >        {backText}      </motion.span>      <span className="invisible">{frontText}</span>    </motion.button>  );}export { FlipButton, type FlipButtonProps, type FlipDirection };

Different flip directions create unique visual effects when users hover over the button.

Use Cases

This free open source React component works well for:

Call-to-action buttons - Interactive buttons that reveal secondary actions in Next.js applications
Navigation menus - Hover effects that show additional context using TypeScript and Tailwind CSS
Form submissions - Buttons that flip to show loading or success states
Creative interfaces - Engaging micro-interactions for modern web applications

API Reference

FlipButton

Prop	Type	Default	Description
`frontText`	`string`	required	Text displayed on the front face of the button
`backText`	`string`	required	Text displayed on the back face during flip animation
`from`	`FlipDirection`	`"top"`	Direction of the flip animation (top, bottom, left, right)
`transition`	`Transition`	`{ type: "spring", stiffness: 280, damping: 20 }`	Motion transition configuration for animation timing
`frontClassName`	`string`	-	Custom CSS classes for the front face styling
`backClassName`	`string`	-	Custom CSS classes for the back face styling
`className`	`string`	-	CSS classes applied to the button container

FlipDirection

top - Flips vertically from top to bottom
bottom - Flips vertically from bottom to top
left - Flips horizontally from left to right
right - Flips horizontally from right to left

Implementation Notes

Button uses CSS perspective for 3D flip effects with 1000px depth
Front face has muted background, back face uses primary theme colors
Invisible text element maintains consistent button dimensions
Compatible with all Motion transition configurations
Supports all standard button props through HTMLMotionProps

Reactflip-button

Reactflip-button

On this page