Copy Button

Copy to clipboard: a tick for a beat, and a visible failure when it cannot.

demos.tsx

import { CopyButton } from "@/components/ui/hiip-ui/copy-button";

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>
  );
}

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 />

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

buttonshadcn installs these for you if they are missing.

npm packages

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

Files written

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