Share Button
Button that fans out social icons. Pro · Animated components › Buttons
A share button that fans the network icons out beside itself — on hover, on click or tap, and from the keyboard (a disclosure: Escape folds it back to the button). Each icon is a real link or the copy action; onShare reports the pick.
Installation
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';Props
| 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. |
Related components
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- 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
- 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: GitHub Stars Button · Next: Code Tabs · All Animated components