# Copy Button

> Source: https://design.nanatec.co.ke/components/copy-button/
> A button that copies text to the clipboard and shows a brief "copied" confirmation. Copy a literal `value`, or read the text from another element via the `from` selector. Renders icon-only by default; set `show-label` to display the swapping Copy → Copied text.

A button that copies text to the clipboard and shows a brief "copied" confirmation. Copy a literal `value`, or read the text from another element via the `from` selector. Renders icon-only by default; set `show-label` to display the swapping Copy → Copied text.

## Preview

```html
<nana-copy-button value="npm install @nana-tec/ui-components"></nana-copy-button>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/copy-button";
```

## Basic usage

```html
<nana-copy-button value="npm install @nana-tec/ui-components"></nana-copy-button>
```

## Variants & sizes

```html
<nana-copy-button value="Hello, world" show-label></nana-copy-button>
<nana-copy-button value="Outlined" show-label variant="outlined"></nana-copy-button>
<nana-copy-button value="Ghost" show-label variant="ghost"></nana-copy-button>
```

```html
<nana-copy-button value="sm" label="Copy" size="sm" variant="outlined"></nana-copy-button>
<nana-copy-button value="md" label="Copy" size="md" variant="outlined"></nana-copy-button>
<nana-copy-button value="lg" label="Copy" size="lg" variant="outlined"></nana-copy-button>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-copy` | `CustomEvent` | Fired after a successful copy (`detail.value`) |
| `nana-error` | `CustomEvent` | Fired when the copy fails (`detail.error`) |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-copy-button-radius` | — | Corner radius |
| `--nana-copy-button-color` | — | Icon / text colour |

## CSS Parts

| Part | Description |
|---|---|
| `button` | The underlying button |
| `icon` | The copy / success icon |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/button/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-copy-button--docs