70Copy

Copy one short string: an org ID, an API key, a token name, a share link. The code block has its own copy button because it copies a whole file; this is the inline one for a value in a table or a spec row.

Use it for

A value the reader will paste somewhere else
Beside an ID, key, endpoint or token name

Not for

A whole code block — Syntax highlighter has copy built in
A value short enough to retype, like a two-digit number

Default and confirmed

The right-hand one shows the state JS sets after a successful copy.

markup

<button class="ns-copy" type="button"><i class="ph ph-file-text" aria-hidden="true"></i><span class="ns-copy__value">00D5j000000abcAAA</span></button>
<button class="ns-copy" type="button" data-copied><i class="ph ph-check-circle" aria-hidden="true"></i><span class="ns-copy__value">00D5j000000abcAAA</span></button>

In a spec row

Org ID
API version: v62.0

markup

<dl class="ns-deflist">
  <dt>Org ID</dt><dd><button class="ns-copy" type="button" aria-label="Copy org ID"><i class="ph ph-file-text" aria-hidden="true"></i><span class="ns-copy__value">00D5j000000abcAAA</span></button></dd>
  <dt>API version</dt><dd>v62.0</dd>
</dl>

Accessibility contract

data-copied is an attribute, not a class, so the same hook can carry aria-live text — a copy button that only changes colour tells a screen-reader user nothing
A real <button> with an accessible name that includes what is being copied