Copy ID Button
Component
Section titled “Component” Preview solid
import { CopyIdButton } from "@/components/ui/copy-id-button"
export function CopyIdButtonDemo() {return ( <div class="flex items-center gap-2"> <span class="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/s/copy-id-button.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/copy-id-button.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/copy-id-button.jsonimport { type ComponentProps, createSignal, splitProps } from "solid-js"import { IconClipboard } from "@tabler/icons-solidjs"import { Button } from "./button"
export interface CopyIdButtonProps extends ComponentProps<"button"> { id: string label?: string}
export function CopyIdButton(props: CopyIdButtonProps) { const [local, rest] = splitProps(props, ["id", "label", "class"]) const [copied, setCopied] = createSignal(false)
const handleCopy = async () => { await navigator.clipboard.writeText(local.id) setCopied(true) setTimeout(() => setCopied(false), 2000) }
return ( <Button type="button" variant="ghost" size="sm" class={local.class} onClick={handleCopy} {...rest}> <IconClipboard class="h-4 w-4 mr-2" /> {copied() ? "Copied!" : local.label ?? "Copy"} </Button> )}