Copy Button

A button that copies a value to the clipboard with feedback.

Installation

Add the copy button component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/copy-button.json

Usage

tsx

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

Examples

Variants

Any Button variant/size

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

<div className="flex items-center gap-2">
  <CopyButton value="Copied text" />
  <CopyButton value="Copied text" variant="outline" />
  <CopyButton value="Copied text" variant="outline" size="icon-sm" />
</div>