# components/CopyButton (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/CopyButton.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/CopyButton.tsx).

## 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.

```ts
function CopyButton(props: CopyButtonProps): Element
```

**Parameters**

- `props` (`CopyButtonProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the button.
- `label?` (`string`): Accessible name and tooltip. Defaults to the `copy` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `reveal?` (`boolean`, default `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.

Source: [ui/src/components/CopyButton.tsx:47](https://github.com/Tahul/zidane/blob/main/ui/src/components/CopyButton.tsx#L47)

## Interfaces

### `CopyButtonProps`

Interface.

Props for [`CopyButton`](https://zidane.si/docs/reference/ui-components-copy-button.md#CopyButton).

```ts
interface CopyButtonProps
```

**Properties**

- `className?` (`string`): Extra classes on the button.
- `label?` (`string`): Accessible name and tooltip. Defaults to the `copy` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `reveal?` (`boolean`, default `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.

Source: [ui/src/components/CopyButton.tsx:22](https://github.com/Tahul/zidane/blob/main/ui/src/components/CopyButton.tsx#L22)