Loading…

Share Button

beta

A Share pill that springs open into a staggered row of share targets, with a built-in copy-link target and an optional hand-off to the native share sheet.

Forms
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add share-button

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { ShareButton } from "@/components/ui/share-button";

Examples

Every example the tests run, live and operable, side by side.

Default
Variants
Click And Actions
Native
Sizes

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ShareButton>

Prop	Type	Default
`copiedLabel` Announced once the link is on the clipboard.	`string`	`"Link copied"`
`copyLabel` Name of the built-in copy target.	`string`	`"Copy link"`
`defaultOpen` Initial open state when uncontrolled.	`boolean`	`false`
`groupLabel` Accessible name for the group of targets.	`string`	`"Share to"`
`icon` The trigger's icon. Defaults to a share glyph.	`ReactNode`	—
`label` Trigger name and visible text.	`string`	`"Share"`
`native` Hand off to `navigator.share` where the browser has it, instead of opening the tray.	`boolean`	`false`
`onCopy` Called with `url` once it has been copied.	`(url: string) => void`	—
`onOpenChange`	`(open: boolean) => void`	—
`open` Controlled open state.	`boolean`	—
`openOn` `hover` (default) previews on hover and keyboard focus as well as opening on press.	`ShareButtonOpenOn`	`"hover"`
`shareText` `text` for the native share sheet.	`string`	—
`shareTitle` `title` for the native share sheet.	`string`	—
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`targets` The targets, in order from the trigger outward.	`ShareTarget[]`	`[]`
`url` The link being shared. Adds a built-in "Copy link" target, last.	`string`	—
`variant`	`"solid" \| "outline" \| "soft"`	`"solid"`

Plus every attribute of <div> except onCopy, onDrag, onDragStart, onDragEnd, onAnimationStart.

Accessibility

The trigger is a button named by its label, with aria-expanded and aria-controls pointing at a group labelled "Share to" of links and buttons, each named by its target. Keyboard focus opens it as well as hover; Arrow keys move between the trigger and the targets; Escape collapses it and returns focus to the trigger; focus leaving closes it. Touch and keyboard press toggle it, so nothing depends on hover. Copying the link is announced through a polite role="status" region and the check only appears once the clipboard write has resolved. Icons are aria-hidden. Under reduced motion the springs become instant.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

copiedLabel

Announced once the link is on the clipboard.

string

"Link copied"

copyLabel

Name of the built-in copy target.

string

"Copy link"

defaultOpen

Initial open state when uncontrolled.

boolean

false

groupLabel

Accessible name for the group of targets.

string

"Share to"

icon

The trigger's icon. Defaults to a share glyph.

ReactNode

—

label

Trigger name and visible text.

string

"Share"

native

Hand off to navigator.share where the browser has it, instead of opening the tray.

boolean

false

onCopy

Called with url once it has been copied.

(url: string) => void

—

onOpenChange

(open: boolean) => void

—

open

Controlled open state.

boolean

—

openOn

hover (default) previews on hover and keyboard focus as well as opening on press.

ShareButtonOpenOn

"hover"

shareText

text for the native share sheet.

string

—

shareTitle

title for the native share sheet.

string

—

size

"sm" | "md" | "lg"

"md"

targets

The targets, in order from the trigger outward.

ShareTarget[]

[]

url

The link being shared. Adds a built-in "Copy link" target, last.

string

—

variant

"solid" | "outline" | "soft"

"solid"