║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Flip Button description: An animated flip button component with a variety of styles. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-buttons-flip" />

Installation

<ComponentInstallation name="components-buttons-flip" />

Usage

<FlipButton>
  <FlipButtonFront>Front</FlipButtonFront>
  <FlipButtonBack>Back</FlipButtonBack>
</FlipButton>

API Reference

FlipButton

<ExternalLink href="https://animate-ui.com/docs/primitives/buttons/flip#flipbutton" text="Animate UI API Reference - Flip Button Primitive" />

<TypeTable type={{ variant: { description: 'The variant of the button.', type: '"default" | "accent" | "destructive" | "outline" | "secondary" | "ghost" | "link"', required: false, default: 'default', }, size: { description: 'The size of the button.', type: '"default" | "sm" | "lg" | "icon"', required: false, default: 'default', }, from: { description: 'The direction the button will flip from.', type: "'top' | 'right' | 'bottom' | 'left'", required: false, default: 'top', }, tapScale: { description: 'The scale of the button on tap.', type: 'number', required: false, default: 0.95, }, '...props': { description: 'The props for the button.', type: 'HTMLMotionProps<"button">', required: false, }, }} />

FlipButtonFront

<ExternalLink href="https://animate-ui.com/docs/primitives/buttons/flip#flipbuttonfront" text="Animate UI API Reference - Flip Button Front Primitive" />

<TypeTable type={{ variant: { description: 'The variant of the front face.', type: '"default" | "accent" | "destructive" | "outline" | "secondary" | "ghost" | "link"', required: false, default: 'default', }, size: { description: 'The size of the front face.', type: '"default" | "sm" | "lg" | "icon"', required: false, default: 'default', }, transition: { description: 'The transition for the front face.', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 280, damping: 20 }", }, '...props': { description: 'The props for the front face.', type: 'HTMLMotionProps<"span">', required: false, }, }} />

FlipButtonBack

<ExternalLink href="https://animate-ui.com/docs/primitives/buttons/flip#flipbuttonback" text="Animate UI API Reference - Flip Button Back Primitive" />

<TypeTable type={{ variant: { description: 'The variant of the back face.', type: '"default" | "accent" | "destructive" | "outline" | "secondary" | "ghost" | "link"', required: false, default: 'default', }, size: { description: 'The size of the back face.', type: '"default" | "sm" | "lg" | "icon"', required: false, default: 'default', }, transition: { description: 'The transition for the back face.', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 280, damping: 20 }", }, '...props': { description: 'The props for the back face.', type: 'HTMLMotionProps<"span">', required: false, }, }} />

Credits

• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║