Copy button

Give people a useful copy action without pretending it succeeded.

Example

A visible, read-only field stays selectable when browser clipboard access is unavailable.

<lw-copy class="stack stack-compact">
  <label for="meeting-address">Meeting address</label>
  <textarea id="meeting-address" data-copy-source rows="2" readonly>https://example.test/meeting/annual-planning</textarea>
  <button type="button" data-copy-button>Copy address</button>
  <p data-copy-status role="status" aria-live="polite" aria-atomic="true"></p>
</lw-copy>

Meeting address

https://example.test/meeting/annual-planning

Use it

Load /dist/copy-button.js on pages that use <lw-copy>. Keep the source in a visible, read-only field so it remains selectable. Each instance reads its current field value when clicked and updates only its own polite status message.

The button announces “Copying…” while the request runs and reports success only after navigator.clipboard.writeText() resolves. If access is missing or denied, focus stays on the button and the message tells people to select the field and use their device's copy command. The component does not add a legacy clipboard fallback or alter a host application's clipboard policy.