Copy ID Button

Component

Preview

Preview react

Usage

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

export function CopyIdButtonDemo() {
return (
  <div className="flex items-center gap-2">
    <span className="text-sm text-muted-foreground">user_123456789</span>
    <CopyIdButton id="user_123456789" />
  </div>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/copy-id-button.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/copy-id-button.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/copy-id-button.json

Manual

components/ui/copy-id-button.tsx

import { type ButtonHTMLAttributes, useState } from "react"
import { IconClipboard } from "@tabler/icons-react"
import { Button } from "./button"

export interface CopyIdButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  id: string
  label?: string
}

export function CopyIdButton({ id, label = "Copy", className, ...props }: CopyIdButtonProps) {
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    await navigator.clipboard.writeText(id)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <Button
      type="button"
      variant="ghost"
      size="sm"
      className={className}
      onClick={handleCopy}
      {...props}
    >
      <IconClipboard className="h-4 w-4 mr-2" />
      {copied ? "Copied!" : label}
    </Button>
  )
}