A Share pill that unfolds sideways into a row of action buttons, each springing in with a tooltip while the icon turns into a close cross. Actions confirm with a check and Escape folds it back.
How we cut CI build times by 63%
npx shadcn@latest add https://hyperblur.dev/r/button-share-expand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-share-expand.tsx.
import { ButtonShareExpand } from "@/components/hyperblur/button-share-expand"
<ButtonShareExpand copyText="https://example.com/post/42" onAction={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Share" | Text of the main pill and the accessible name of the group. |
| actions | { id: string; label: string; icon?: "link" | "mail" | "message" | "embed" | "download" | "qr" | ReactNode }[] | link, mail, message, embed | Buttons revealed in the tray. Use a built-in icon name or pass your own node. |
| open | boolean | undefined | Controlled open state. |
| defaultOpen | boolean | false | Initial state when uncontrolled. |
| onOpenChange | (open: boolean) => void | undefined | Called when the tray opens or closes. |
| onAction | (id: string) => void | undefined | Called with the id of the action that was pressed. |
| copyText | string | undefined | When set, the link and embed actions also write this text to the clipboard. |
| accent | string | "#2f7bff" | Color of the confirmation state and focus rings. |