CopyButton() — ui Function Reference

Architecture documentation for the CopyButton() function in copy-button.tsx from the ui codebase.

Function tsx Internationalization RTLLayout calls 1

Entity Profile

Internationalization→ RTLLayout→ CopyButton() — ui Function Reference

Dependency Diagram

graph TD
  ffd049c6_17ed_6822_41f1_0e4e9f107942["CopyButton()"]
  701779a9_8de2_59e1_59b9_463b82632b4d["copy-button.tsx"]
  ffd049c6_17ed_6822_41f1_0e4e9f107942 -->|defined in| 701779a9_8de2_59e1_59b9_463b82632b4d
  c93c39fc_8720_7e8c_ae38_e1d3f239c333["copyToClipboardWithMeta()"]
  ffd049c6_17ed_6822_41f1_0e4e9f107942 -->|calls| c93c39fc_8720_7e8c_ae38_e1d3f239c333
  style ffd049c6_17ed_6822_41f1_0e4e9f107942 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/copy-button.tsx lines 17–68

export function CopyButton({
  value,
  className,
  variant = "ghost",
  event,
  ...props
}: React.ComponentProps<typeof Button> & {
  value: string
  src?: string
  event?: Event["name"]
  tooltip?: string
}) {
  const [hasCopied, setHasCopied] = React.useState(false)

  React.useEffect(() => {
    if (hasCopied) {
      const timer = setTimeout(() => setHasCopied(false), 2000)
      return () => clearTimeout(timer)
    }
  }, [hasCopied])

  return (
    <Button
      data-slot="copy-button"
      data-copied={hasCopied}
      size="icon"
      variant={variant}
      className={cn(
        "bg-code absolute top-3 right-2 z-10 size-7 hover:opacity-100 focus-visible:opacity-100",
        className
      )}
      onClick={() => {
        copyToClipboardWithMeta(
          value,
          event
            ? {
                name: event,
                properties: {
                  code: value,
                },
              }
            : undefined
        )
        setHasCopied(true)
      }}
      {...props}
    >
      <span className="sr-only">Copy</span>
      {hasCopied ? <IconCheck /> : <IconCopy />}
    </Button>
  )
}