Components / Controls

Copy Button

Copy to clipboard: tick for a beat, toast, and a message when it fails.

Install — needs @hiip registered in components.json

bunx shadcn@latest add @hiip/copy-button

Or by URL, with the token in the query

bunx shadcn@latest add "https://ui.hiip.ai/r/copy-button.json?token=$HIIP_REGISTRY_TOKEN"

Both need a token — set one up.

Anatomy

Import from components/ui/hiip-ui/copy-button.

<CopyButton />

Examples

function CopyButtonDemo() {
  return (
    <div className="flex items-center gap-3">
      <CopyButton value="hiip-ui" ariaLabel="Copy the package name" />
      <CopyButton
        value="hiip-ui"
        label="Copy name"
        variant="outline"
        ariaLabel="Copy the package name"
      />
    </div>
  );
}

API Reference

Generated from the source. Props forwarded to the underlying element are not listed.

CopyButton

Prop	Type	Default
`value`required	`string`	—
`ariaLabel` The accessible name when there is no visible `label` — an icon-only button otherwise reaches a screen reader as "button" and nothing else.	`string \| undefined`	—
`className`	`string \| undefined`	—
`label`	`string \| undefined`	—
`nativeButton`	`boolean \| undefined`	—
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState> \| undefined`	—
`size`	`any`	—
`variant`	`any`	—

Type

registry:ui

Pulls in

button, sonnershadcn installs these for you if they are missing.

npm packages

@base-ui/react sonner @hugeicons/react @hugeicons/core-free-icons

Files written

components/ui/hiip-ui/copy-button.tsx