Copy ID Button
Component
Section titled “Component” Preview react
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
Section titled “Installation”npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/copy-id-button.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/copy-id-button.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/copy-id-button.jsonimport { 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> )}