Liquid Button

Кнопка, которая заполняется «жидкостью» при наведении. Pro · Анимированные компоненты › Кнопки

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add liquid-button

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { LiquidButton } from 'valyro-ui-pro';

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.