Klarhimmel UI
Klarhimmel ↗

Copy button

Stable

An icon button that copies a value and confirms with a check.

npx shadcn add @klarhimmel/copy-button

When to use

  • Use for

    Next to a command, token or id people paste elsewhere.

  • Not for

    Long text. Offer a download instead.

  • Pairs with

    Command boxes, code blocks.

Preview

npx shadcn add @klarhimmel/button
copy-button.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { CopyButton } from '@/components/klarhimmel/ui/copy-button';

export default function Example() {
  return (
    <Theme theme="brand">
      <CopyButton value="npm install" label="Copy command" />
    </Theme>
  );
}

Install

Import

import { CopyButton } from '@/components/klarhimmel/ui/copy-button';
Lands in
components/klarhimmel/ui/copy-button.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

API reference

PropTypeDefaultDescription
valuestring-Required. The text copied to the clipboard.
labelstring'Copy'Accessible name of the button.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
Enter / SpaceCopies and shows a check
Accessibility