Application
Share Buttons
Share links for X, LinkedIn, and more, with copy link and the native share sheet.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add share-buttonsWrites components/ui/share-buttons.tsx and the components it builds on. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { ShareButtons, shareUrl } from "@/components/ui/share-buttons";API reference
Props and composition points for Share Buttons. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
url / title | string / string | None | The absolute URL to share, and the text or subject where a network supports it. url is required. |
networks | ("x" | "linkedin" | "facebook" | "whatsapp" | "reddit" | "email")[] | ["x", "linkedin"] | Which share links to render, in order. |
copyLink / nativeShare | boolean / boolean | true / false | Add a copy-link button, and a native share button where the browser offers the Web Share API. |
showLabels | boolean | false | Show network names next to the icons. |
shareUrl(network, url, title) | function | None | The exported URL builder, for your own share layout. |
Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- The controls are a named group, and every icon-only link has a name such as Share on LinkedIn.
- Network links are plain anchors that open in a new tab with noopener. Nothing loads from a third party until someone chooses to share.
- Copy link announces the result through Copy Button's live region.
- The native share button only renders where the browser supports it, so there is never a dead control.
Used in production
The Aback products whose interfaces shaped this component.