fin1teds
v1.2.0
  1. ds
  2. Components
  3. Copy field

Copy field

Tokens, URLs and commands people copy, with reveal for secrets.

Code
<label class="fld"><span>Webhook endpoint</span>
  <div class="copy-field"><code>https://hooks.acme.dev/v1/pipelines/prj_8c1f02/events</code><button class="btn" type="button" data-copy="https://hooks.acme.dev/v1/pipelines/prj_8c1f02/events"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg><span>Copy</span></button></div>
</label>
<label class="fld"><span>Project id</span>
  <div class="copy-field" style="max-width:16rem"><code>prj_8c1f02</code><button class="btn icon" type="button" data-copy="prj_8c1f02" aria-label="Copy project id"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button></div>
</label>

A read-only value in mono with a copy button. The button uses the same data-copy behaviour as code blocks: the label turns into "Copied" for a moment. Long values truncate with an ellipsis but copy in full.

Secrets

Code
<label class="fld"><span>Secret key</span>
  <div class="copy-field secret" id="secret"><code data-secret="sk_live_51Hq9fK2eZvKYlo2CwBf8x3f9a"><span>sk_live_••••••••••••••••3f9a</span></code><button class="btn icon" type="button" aria-label="Show key" aria-pressed="false" data-show><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg></button><button class="btn" type="button" data-copy="sk_live_51Hq9fK2eZvKYlo2CwBf8x3f9a"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg><span>Copy</span></button></div>
  <span class="hint">Created 3 Oct by priya@acme.dev. Last used 4 minutes ago from 13.232.40.18.</span>
</label>

Masked by default, with the first characters and the last four showing so people can tell keys apart. Reveal is a toggle; copy works without revealing, which is what most people want. Say when it was created, by whom and when it was last used: that is how people decide whether a key is safe to rotate.

Commands

npx @acme/cli login --workspace acme-prod
kubectl -n data logs deploy/orders-api --since=15m
Code
<div class="copy-field cmd lg"><code>npx @acme/cli login --workspace acme-prod</code><button class="btn" type="button" data-copy="npx @acme/cli login --workspace acme-prod"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg><span>Copy</span></button></div>
<div class="copy-field cmd"><code>kubectl -n data logs deploy/orders-api --since=15m</code><button class="btn icon" type="button" data-copy="kubectl -n data logs deploy/orders-api --since=15m" aria-label="Copy command"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button></div>

.cmd adds a $ prompt that is not part of the copied text. For several lines, such as an env file, use a code block, which has the same copy button:

DATABASE_URL=postgres://loader:••••••••@orders-db.internal:5432/orders
WAREHOUSE=analytics
S3_BUCKET=acme-raw-ap-south-1
API_KEY=sk_live_••••••••••••3f9a

API

ClassOnWhat it does
.copy-fielddivA frame: <code> value, then buttons. Put the full value in each button's data-copy.
.secret.copy-fieldA masked value. The show button is a toggle with aria-pressed.
.cmd.copy-fieldAdds a $ prompt that is not copied.
.lg.copy-fieldTaller, larger text. For the one command on a getting-started page.
.ok.copy-fieldGreen border, for a value that has just been created.
Do
  • Show a new secret once, in full, with a warning that it will not be shown again.
  • Copy without revealing.
  • Commands people can paste as they are, with real flags.
Don't
  • Secrets in URLs or in the page title.
  • Copy buttons with no feedback.
  • A $ inside the copied text.

Accessibility

  • Icon-only copy buttons need a label that says what is copied: "Copy project id".
  • The "Copied" text replaces the button label, so screen readers hear it when focus is on the button.