Copy Button

Put Copy Button next to values people paste elsewhere, like invite links, API IDs, addresses and short tokens. It can be a bare icon after the value, a labelled text button, or an icon action inside an input group.

Install

bashnpx shadcn@4.18.0 add @siteplane/copy-button

Import it from @/siteplane/components/copy-button. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Button: Pick Button when the action does something besides copying. Copy Button owns the copied and failed states.
• vs Input Group: Pair with Input Group when the value sits in a read-only field and the copy icon belongs at its end.
• vs Code: For a code block, pick Code with copyable. It places this button inside the block for you.

Rules

• Name the icon-only form after what it copies, through labels.copy or aria-label. Example: "Copy invite link".
• Show the value next to the button so people can select it by hand if the clipboard write fails.
• Pass a function to value to fetch the text on press. Keep that request short: browsers allow a copy only for a brief window after the gesture.
• In onCopyError, tell people what to do next when copying is unavailable, such as on plain http.
• In a field, set profile="field-action". In a menu, keep a MenuItem and call useCopyToClipboard from its handler.

Reference

• Copy Button docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Actions. Read the installed source under src/siteplane before relying on an API.