Copy

When to use

For values people paste somewhere else: a reference code, an ID, a link, a key name.

When not to use

• For long text: Do not offer copy for paragraphs; selectable text is enough.
• Alone for secret values: Show them with MaskedValue first and ask for copy separately.

Anatomy

CopyREF-2048-7731

LightDark

Copy code

import { Copy, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-wrap items-center gap-lg">
        <Copy value="REF-2048-7731" label="Copy reference code" copiedLabel="Reference code copied" />
        <Copy value="REF-2048-7731" variant="button" />
        <Copy value="REF-2048-7731" variant="inline" label="Copy reference code" copiedLabel="Reference code copied" />
      </div>
    </Provider>
  );
}

1. Value: Only in the inline variant; long values wrap.
2. Button: A copy icon; a check mark after copying.
3. Tooltip: “Copy”, then “Copied”.

Behaviour

• A click writes the value to the clipboard, a check mark appears and screen readers hear “Copied”.
• After two seconds (resetAfter) the button returns to its first state.
• If the browser refuses, “Could not copy” is announced and onError is called.
• On non-secure pages without the Clipboard API, a hidden text area copies the value; focus stays on the button.

Guidelines

• Say what is copied in the name: “Copy reference code”.
• Use one Copy per value on a page.
• Keep the copied text the same as the shown text; if it differs (children), say so clearly.

Content

Key	TR	EN
ui.copy.label	Kopyala	Copy
ui.copy.copied	Kopyalandı	Copied
ui.copy.failed	Kopyalanamadı	Could not copy

Related components

• IconButton: Other icon actions.
• MaskedValue: Hidden values.