Copy

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Variants

icon is icon-only with a tooltip; button has text; inline shows the value with an icon button after it.

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>
  );
}

Inline

children changes the text shown; value is always what goes to the clipboard.

Reference code

REF-2048-7731

Invitation link

example.com/invite/7Q2K

LightDark

Copy code

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

export default function Inline() {
  return (
    <Provider locale="en-GB">
      <dl className="flex flex-col gap-md">
        <div className="flex flex-col gap-xxs">
          <dt className="type-label-sm text-fg-subtle">Reference code</dt>
          <dd>
            <Copy value="REF-2048-7731" variant="inline" label="Copy reference code" copiedLabel="Reference code copied" />
          </dd>
        </div>
        <div className="flex flex-col gap-xxs">
          <dt className="type-label-sm text-fg-subtle">Invitation link</dt>
          <dd>
            <Copy value="https://example.com/invite/7Q2K" variant="inline">
              example.com/invite/7Q2K
            </Copy>
          </dd>
        </div>
      </dl>
    </Provider>
  );
}

Light and dark mode

The button colours are the Button ones.

Light

CopyREF-2048-7731

Dark

CopyREF-2048-7731

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>
  );
}