Liquid Button
Button that fills with “liquid” on hover. Pro · Animated components › Buttons
A call to action that fills up with liquid under the pointer or keyboard focus: a slowly turning wave rises on a spring and the label switches to the fill's text colour. Decoration only — not a progress indicator. Colours: --ui-liquid-button-color and --ui-liquid-button-fg (default: the primary pair).
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add liquid-buttonnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { LiquidButton } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
fillHeight | number | 0 | Level of liquid resting along the bottom edge, px — a charge, a progress hint. Default 0: the button looks plain until hovered or focused (a thin resting line reads as a bottom border). |
variant | 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link' | 'secondary' | Solid primary/accent/danger fill, outlined secondary, transparent ghost, or unpadded text link. |
size | 'sm' | 'md' | 'lg' | Control height, padding and text size. | |
leftIcon | ReactNode | Icon or element before the label. | |
rightIcon | ReactNode | Icon or element after the label. | |
loading | boolean | Shows a spinner and blocks activation without changing the button's width: the spinner takes the left icon's place, or covers the label when there is no left icon. The button stays focusable and gets aria-busy. | |
fullWidth | boolean | Stretch to the full width of the container. | |
pill | boolean | Fully rounded ends, regardless of theme. | |
hoverScale | number | Scale under a hovering mouse, e.g. 1.05; it springs back with a slight bounce. Off by default (the theme's own hover). Skipped on touch and under reduced motion. | |
tapScale | number | Scale while pressed, e.g. 0.95, instead of the theme's press transform; springs back on release. |
Related components
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- 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: Flip Button · Next: Theme Toggler · All Animated components