Copy ID Button

Component

Preview

Preview solid

Usage

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

CLI

npm

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

pnpm

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

bun

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

Manual

components/ui/copy-id-button.tsx

import { 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>
  )
}