Share Button

A share button that fans out into copy-link and custom share actions.

@spectrumui/share-button

Designing calmer micro-interactions

128 likes

Click share — try the copy-link action

Installation

Usage

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

<ShareButton
  copyValue="https://ui.spectrumhq.in"
  actions={[
    { icon: <Twitter size={15} />, label: "Share on X", onSelect: () => shareOnX() },
  ]}
/>

API Reference

ShareButton

Renders a round trigger button with aria-expanded and aria-haspopup, and an action row with role="menu". Each entry in actions is a ShareAction: icon: React.ReactNode rendered inside the round button, label: string used as the tooltip and accessible name, and onSelect: () => void fired on click. When copyValue is set, a copy-link button is prepended that writes to the clipboard and flashes an emerald check.

Prop	Type	Default	Description
`actions`	`ShareAction[]`	`[]`	Custom actions fanned out after the built-in copy action
`copyValue`	`string`	-	URL or text for the built-in copy-link first action; omit to hide it
`direction`	`"left" \| "right"`	`"right"`	Side the actions fan out toward
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the trigger; actions are one step smaller
`label`	`string`	`"Share"`	Accessible name of the trigger
`closeOnSelect`	`boolean`	`true`	Collapse the row shortly after a custom action is selected
`className`	`string`	-	Additional classes merged onto the root element

Examples

Direction and sizes

Fans out to the left, plus the three trigger sizes