Social Button
SocialButton is a hover-revealed row of social-action icon buttons with an optional trigger label and callback. It provides the UI only; your `onShare` handler is responsible for performing each action.
componentregistry-item.json
Installed with shadcn add · 1 workaround (recipe written by a coding agent) · theme neutral (none shipped)
- added npm package lucide-react@0.468.0
Installation
pnpm dlx shadcn@latest add @kokonutui/social-button
Requires @kokonutui in the registries of your components.json (shadcn adds official directory namespaces automatically).
Usage
usage.tsx
import SocialButton from "@/components/kokonutui/social-button";export function ShareControl() { return <SocialButton onShare={(index, item) => console.log(index, item.label)} />;}- Offer several social or link-sharing actions in a compact space.
- Add a share control to a card, article, or other content surface.
- Use when you want to supply custom share actions and handle their behavior yourself.
API reference
PropTypeDefaultDescription
labelstring"Share"Text shown beside the link icon on the trigger button.
itemsShareItem[]Twitter, Instagram, LinkedIn, and Copy link itemsActions shown in the revealed row. Each item has an `icon` of type `LucideIcon` and a `label` string; the label is also used as the icon button's accessible name.
onShare(index: number, item: ShareItem) => voidnullCalled when an action button is clicked, with its zero-based index and item. The component does not perform sharing or copy a link itself.
classNamestringnullAdditional classes applied to the trigger button.
button attributesReact.ButtonHTMLAttributes<HTMLButtonElement>nullStandard HTML button attributes are accepted and forwarded to the trigger button, including attributes such as `type`, `disabled`, and `onClick`.
Accessibility
- The trigger is a button and accepts standard button attributes, including `disabled` and `type`.
- Each revealed action is a button with `aria-label` set from its item's label.
- The action row is revealed by mouse hover only; there is no focus or click behavior that opens it, which may make the actions difficult to discover or use with a keyboard.
- The component does not announce that the action row has appeared. Consider providing another keyboard-accessible way to reveal the actions when needed.
Docs written by openai:gpt-6-luna from the registry source.
Use with Coding Agent
Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.
prompt.md
Use the "Social Button" component (kokonutui/social-button) from its shadcn registry.1. Install it with: npx shadcn@latest add @kokonutui/social-button2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: label, items, onShare, className, button attributes.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport SocialButton from "@/components/kokonutui/social-button";export function ShareControl() { return <SocialButton onShare={(index, item) => console.log(index, item.label)} />;}```Files & dependencies
- /components/kokonutui/social-button.tsx→ components/kokonutui/social-button.tsx
dependencieslucide-reactmotion
registryDependenciesbutton