Flip Button
Кнопка с двумя сторонами, переворачивается на пружине. Pro · Анимированные компоненты › Кнопки
Установка
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';Пропсы
| 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). |
Похожие компоненты
- Toggle — Кнопка-переключатель с пружинным откликом
- Liquid Button — Кнопка, которая заполняется «жидкостью» при наведении
- Theme Toggler — Смена светлой и тёмной темы с раскрытием через View Transitions
- GitHub Stars Button — Ссылка на репозиторий с прокручивающимся числом звёзд
- Share Button — Кнопка, раскрывающая иконки соцсетей
- Code Tabs — Варианты кода во вкладках: npm, pnpm, bun — с копированием
- Number Wheel — Число на вращающемся барабане с соседними значениями
- Pin List — Список с закреплением: элементы плавно переезжают между группами
- Notification Stack — Стопка уведомлений, раскрывающаяся в список
- Todo List — Чек-лист с волнистым зачёркиванием выполненных пунктов
- Presence Avatars — Кто онлайн: аватары перестраиваются при смене статуса
- Radial Menu — Кольцевое контекстное меню по правому клику
Назад: Toggle · Далее: Liquid Button · Весь раздел «Анимированные компоненты»