UI kit reference

components/CopyButton

import { … } from 'zidane-ui'ui/src/components/CopyButton.tsx

CodeFrame with caption

agent.ts

const agent = createAgent({ ...basic, provider })
await agent.run({ prompt: 'build a REST API' })

CodeFrame plain (copy on hover), long line

cat packages/server/src/handlers/very-long-folder-name/another-nested-directory/session-title-generator.ts | head -n 200 # a long line scrolls inside the frame

CodePanel

$ bun test
41 passed

CopyButton inline, Keycaps

esc

Components#

`CopyButton`Component#

Renders a small icon button that copies text to the clipboard. The clipboard glyph swaps to a check for 1.2 seconds after a copy, and the accessible name changes to the copied label. A refused clipboard write fails silently.

TypeScript

function CopyButton(props: CopyButtonProps): Element

Parameters

Parameters
Name	Type	Description
props	`CopyButtonProps`	Component props.

Returns

Element

Props

CopyButton props
Name	Type	Default	Description
className?	`string`		Extra classes on the button.
label?	`string`		Accessible name and tooltip. Defaults to the `copy` label from `useLabels`.
reveal?	`boolean`	`false`	Hide the button until the nearest `.group` ancestor is hovered, or while the button is focused or showing its copied state. Touch screens always show it.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
text	`string`		The text written to the clipboard.

ui/src/components/CopyButton.tsx:47

Interfaces#

`CopyButtonProps`Interface#

Props for CopyButton.

TypeScript

interface CopyButtonProps

Properties

CopyButtonProps properties
Name	Type	Default	Description
className?	`string`		Extra classes on the button.
label?	`string`		Accessible name and tooltip. Defaults to the `copy` label from `useLabels`.
reveal?	`boolean`	`false`	Hide the button until the nearest `.group` ancestor is hovered, or while the button is focused or showing its copied state. Touch screens always show it.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
text	`string`		The text written to the clipboard.

ui/src/components/CopyButton.tsx:22