Implementation:TobikoData Sqlmesh CopyButton
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A specialized button component that copies text to the clipboard and provides visual feedback on success.
Description
The CopyButton component wraps the base Button component with clipboard functionality using the useCopyClipboard hook. It provides a render prop pattern through the children function, passing the copied state to allow custom rendering based on success. The component automatically disables itself temporarily after successful copy (default 2 seconds) to prevent duplicate actions and provide clear user feedback. It includes event propagation prevention to avoid triggering parent click handlers.
Usage
Use CopyButton when users need to copy text values (API keys, URLs, code snippets, IDs) to their clipboard. The render prop children function receives the copied state, allowing you to display different icons or text based on whether the copy was successful. Common pattern is showing a checkmark on success and a copy icon by default.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/CopyButton/CopyButton.tsx
Signature
export interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
text: string
delay?: number
children: (copied: boolean) => React.ReactNode
}
export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
({
text,
title = 'Copy to clipboard',
variant = 'secondary',
size = 'xs',
delay = 2000,
disabled = false,
children,
onClick,
...props
}, ref) => {
// Implementation
},
)
Import
import { CopyButton } from '@sqlmesh-common/components/CopyButton/CopyButton'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | Yes | The text to copy to clipboard |
| delay | number | No | Milliseconds to show copied state (default: 2000) |
| children | (copied: boolean) => React.ReactNode | Yes | Render prop receiving copied state |
| title | string | No | Button tooltip text (default: 'Copy to clipboard') |
| variant | ButtonVariant | No | Button style variant (default: 'secondary') |
| size | Size | No | Button size (default: 'xs') |
| disabled | boolean | No | Disable the button |
| onClick | (e: React.MouseEvent) => void | No | Additional click handler |
| ref | React.Ref<HTMLButtonElement> | No | Forward ref to button element |
Outputs
| Name | Type | Description |
|---|---|---|
| element | React.ReactElement | Button element with copy functionality |
Usage Examples
// Basic copy button with icons
<CopyButton text="https://example.com/api/v1">
{copied => copied ? <CheckIcon /> : <CopyIcon />}
</CopyButton>
// Copy with text feedback
<CopyButton text={apiKey} variant="primary">
{copied => copied ? 'Copied!' : 'Copy API Key'}
</CopyButton>
// Custom delay and styling
<CopyButton
text={codeSnippet}
delay={3000}
size="s"
variant="alternative"
>
{copied => (
<div className="flex items-center gap-2">
{copied ? <Check size={16} /> : <Copy size={16} />}
<span>{copied ? 'Copied' : 'Copy Code'}</span>
</div>
)}
</CopyButton>
// With additional click handler
<CopyButton
text={shareUrl}
onClick={() => trackEvent('share_copied')}
>
{copied => copied ? '✓' : 'Share'}
</CopyButton>