# CopyButton

Copies a value to the clipboard and confirms the copy.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/CopyButton.tsx)

## Overview

A copy button is an icon-only button that writes a value to the clipboard and confirms the copy for two seconds.

Name it by what it copies, such as Copy address, when the raw value reads poorly.

## Examples

### Basic

```tsx
import { CopyButton } from '@tempoxyz/ds'

export function Demo() {
  return <CopyButton value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/CopyButton/Basic.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `small`.

```tsx
import { CopyButton, style } from '@tempoxyz/ds'

const address = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <CopyButton key={size} size={size} value={address} />
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/CopyButton/Size.tsx)

### Variant

Set `variant` to any `Button` variant, such as `text` or `secondary`. It defaults to `text`.

```tsx
import { CopyButton, style } from '@tempoxyz/ds'

const address = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'

export function Demo() {
  return (
    <div {...styles.row()}>
      <CopyButton value={address} />
      <CopyButton value={address} variant="secondary" />
      <CopyButton size="medium" value={address} variant="secondary" />
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/CopyButton/Variant.tsx)

### Disabled

```tsx
import { CopyButton } from '@tempoxyz/ds'

export function Demo() {
  return <CopyButton disabled value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/CopyButton/Disabled.tsx)

## Guidelines

TODO: Write guidelines for CopyButton.