Flip Button
Two-sided button that flips on a spring. Pro · Animated components › Buttons
A button with two faces that flips on hover, keyboard focus and press, on a bouncy spring. On a touch screen a tap keeps the back face up for a moment after the finger lifts, so a quick tap shows it whole. Both faces share one grid cell, so the button keeps the larger face's size.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add flip-buttonnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { FlipButton } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
front * | ReactNode | The resting face; also the button's accessible name unless aria-label is given. | |
back * | ReactNode | The face revealed on hover, keyboard focus or press — a hint, never the only clue to the action. | |
from | 'top' | 'bottom' | 'left' | 'right' | 'top' | Edge the back face flips in from (default top). |
variant | 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link' | 'secondary' | Look of the front face (default secondary). |
backVariant | 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link' | 'primary' | Look of the back face (default primary). |
size | 'sm' | 'md' | 'lg' | 'md' | Height, padding and text size of both faces. |
tapScale | number | 0.95 | Scale while pressed (default 0.95). |
Related components
- Toggle — Toggle button with a springy response
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
- Pin List — Pinnable list: items glide between groups
- Notification Stack — Notification stack that expands into a list
- Todo List — Checklist with a wavy strike-through on done items
- Presence Avatars — Who’s online: avatars rearrange as status changes
- Radial Menu — Ring-shaped context menu on right-click
Previous: Toggle · Next: Liquid Button · All Animated components