CopyButton() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives calls 1

Entity Profile

ComponentRegistry→ UIPrimitives→ CopyButton() — ui Function Reference

Dependency Diagram

graph TD
  6ee147a3_3075_9284_ee27_5495a885fb25["CopyButton()"]
  40c3b834_cac9_e0e3_2ccf_6a31f24f5b75["copy-button.tsx"]
  6ee147a3_3075_9284_ee27_5495a885fb25 -->|defined in| 40c3b834_cac9_e0e3_2ccf_6a31f24f5b75
  950171c6_2456_bafd_9876_2b64c35e4630["copyToClipboardWithMeta()"]
  6ee147a3_3075_9284_ee27_5495a885fb25 -->|calls| 950171c6_2456_bafd_9876_2b64c35e4630
  style 6ee147a3_3075_9284_ee27_5495a885fb25 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/copy-button.tsx lines 31–75

export function CopyButton({
  value,
  className,
  src,
  variant = "ghost",
  event,
  ...props
}: CopyButtonProps) {
  const [hasCopied, setHasCopied] = React.useState(false)

  React.useEffect(() => {
    setTimeout(() => {
      setHasCopied(false)
    }, 2000)
  }, [hasCopied])

  return (
    <Button
      size="icon"
      variant={variant}
      className={cn(
        "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3",
        className
      )}
      onClick={() => {
        copyToClipboardWithMeta(
          value,
          event
            ? {
                name: event,
                properties: {
                  code: value,
                },
              }
            : undefined
        )
        setHasCopied(true)
      }}
      {...props}
    >
      <span className="sr-only">Copy</span>
      {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
    </Button>
  )
}