CopyButton

Tier: clientUnstable

ExamplesCopy Anchor Link

$ npm i @nizivo/react

import type { JSX } from 'react';
import { CodeBlock } from '@nizivo/react/unstable/code-block';

export function CopyButtonExample(): JSX.Element {
  return <CodeBlock variant="command" items={[{ label: 'npm', code: 'npm i @nizivo/react' }]} />;
}

ImportCopy Anchor Link

import { CopyButton } from '@nizivo/react/unstable/copy-button';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/copy-button.css';

Static or interactiveCopy Anchor Link

Client. It writes to the clipboard. How to choose.

UseCopy Anchor Link

value is the text to copy. After a copy the button reads "Copied" for 2 seconds, and a polite live region says so; its name stays "Copy". onCopied hears the copy, and onCopyFailed hears why the clipboard refused (nothing claims a copy then). It is drawn for the dark CodeBlock surface.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

CopyButtonLabels type

import type { CopyButtonLabels } from '@nizivo/react/unstable/copy-button'

CopyButton's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
copiedrequired	string	'Copied'	Shown and announced for 2 seconds after a copy.
copyrequired	string	'Copy'

CopyButtonProps type

import type { CopyButtonProps } from '@nizivo/react/unstable/copy-button'

The props of CopyButton, listed above.

CopyButtonState type

import type { CopyButtonState } from '@nizivo/react/unstable/copy-button'

The render state of CopyButton, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-copy-button, .nz-copy-button-icon.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• copy-button: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.