# Copy button · MIAN

Copies text to the clipboard and confirms it in place, visually and for screen readers.

- Id: `copy-button` · Category: Actions · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/copy-button
- Use for: copy to clipboard, copy code, copy link, share link.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-copy[data-mn-copy="text"]`: Copies the given text.
- `data-mn-copy-target="#el"`: Copies an element’s value or text instead.
- `mn-copy-idle · mn-copy-done`: Content shown before and after copying.
- `mn-copy-field`: A read-only input joined to a copy button.

## Accessibility

- “Copied to clipboard” is announced in a polite live region (override with data-mn-copied).
- Keep a visible label or aria-label on icon-only copy buttons. Emits mn:copy with { text }.

## Examples

### Copy buttons

```html
<button class="mn-btn mn-btn-outline mn-copy" type="button" data-mn-copy="&lt;link rel=&quot;stylesheet&quot; href=&quot;https://mian.ro/dist/mian.css&quot;&gt;"><span class="mn-copy-idle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></svg> Copy</span><span class="mn-copy-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Copied</span></button>
<button class="mn-btn mn-btn-ghost mn-btn-icon mn-copy" type="button" data-mn-copy="https://mian.ro" aria-label="Copy link"><span class="mn-copy-idle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg></span><span class="mn-copy-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span></button>
```

### Copy field

```html
<div class="mn-field" style="max-width:26rem">
  <label class="mn-label" for="key-1">API key</label>
  <div class="mn-copy-field">
    <input class="mn-input" id="key-1" readonly value="mn_live_4f9c2b7e1d8a">
    <button class="mn-btn mn-btn-outline mn-copy" type="button" data-mn-copy-target="#key-1" aria-label="Copy API key"><span class="mn-copy-idle"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></svg></span><span class="mn-copy-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span></button>
  </div>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/copy-button/source