Copy button
Copies text to the clipboard and confirms it in place, visually and for screen readers.
Copy buttons
<button class="mn-btn mn-btn-outline mn-copy" type="button" data-mn-copy="<link rel="stylesheet" href="https://mian.ro/dist/mian.css">"><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
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/copy-button.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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 }.