Copy Button

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

Installation

Add the copy button component with the shadcn CLI.

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

Usage

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

<CopyButton value="npx shadcn@latest add button" />

Examples

Variants

Any Button variant/size

Code

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>