Copy

Installation

Package

@bigbang/ui

Import

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

Source

Copy.tsx

Storybook

Copy · Playground

Copy is in the @bigbang/ui package.

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

<Copy value="REF-2048-7731" variant="inline" label="Copy reference code" />;

Props

valueRequired

Description

The exact text written to the clipboard.

Type

string

variant

Description

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

Type

'icon' | 'button' | 'inline'

Default

'icon'

label

Description

Accessible name and tooltip, such as "Kimliği kopyala". Without it, ui.copy.label ("Kopyala" or "Copy").

Type

string

copiedLabel

Description

Announced and shown after copying. Without it, ui.copy.copied ("Kopyalandı" or "Copied").

Type

string

children

Description

What inline shows instead of value, such as a masked or formatted value.

Type

ReactNode

size

Description

Height of the button, matching the Button sizes.

Type

'xs' | 'sm' | 'md' | 'lg'

Default

'md' (`sm` for `inline`)

resetAfter

Description

Milliseconds the copied or failed state stays before the button returns to copy.

Type

number

Default

2000

onCopy

Description

Called with the value after it is copied.

Type

(value: string) => void

onError

Description

Called when the browser refuses to copy, for example without permission.

Type

(error: unknown) => void

className

Description

Added to the root element; use it for layout only.

Type

string

Data attributes

• data-component="copy" and data-state: idle, copied, failed.
• data-part: value, trigger, failed.