Share Button
Кнопка, раскрывающая иконки соцсетей. Pro · Анимированные компоненты › Кнопки
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add share-buttonnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ShareButton } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
url | string | Address being shared (default: the page's canonical URL, else its address without query and hash). | |
title | string | '' | Headline sent along where the network accepts text. |
targets | ShareButtonTarget[] | DEFAULT_TARGETS | Targets in order (default telegram, vk, x, whatsapp, copy). |
onShare | (target: ShareButtonTarget) => void | Called when a target is picked, before the share window opens — wire analytics or your own share flow here. | |
children | ReactNode | Button text (default: the share label). | |
icon | 'prefix' | 'suffix' | 'suffix' | Share icon before or after the text. |
variant | 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'link' | 'secondary' | Look of the button. |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the button; the target icons keep the medium control size. |
labels | Partial<ShareButtonLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Похожие компоненты
- Toggle — Кнопка-переключатель с пружинным откликом
- Flip Button — Кнопка с двумя сторонами, переворачивается на пружине
- Liquid Button — Кнопка, которая заполняется «жидкостью» при наведении
- Theme Toggler — Смена светлой и тёмной темы с раскрытием через View Transitions
- GitHub Stars Button — Ссылка на репозиторий с прокручивающимся числом звёзд
- Code Tabs — Варианты кода во вкладках: npm, pnpm, bun — с копированием
- Number Wheel — Число на вращающемся барабане с соседними значениями
- Pin List — Список с закреплением: элементы плавно переезжают между группами
- Notification Stack — Стопка уведомлений, раскрывающаяся в список
- Todo List — Чек-лист с волнистым зачёркиванием выполненных пунктов
- Presence Avatars — Кто онлайн: аватары перестраиваются при смене статуса
- Radial Menu — Кольцевое контекстное меню по правому клику
Назад: GitHub Stars Button · Далее: Code Tabs · Весь раздел «Анимированные компоненты»