Copy button usage guidelines

The copy button component allows users to quickly copy any text to their clipboard.

When to use

• When the value to be copied is not directly visible to the user.
• When the content is long or complex, such as a paragraph, code snippet, or a JSON block.
• When the value is part of an input field, table row, or list where space is limited.
• When you want to provide a clear, actionable way for users to copy data without selecting text manually.

When not to use

• When the data is displayed inline with other text, such as a label-value pair. Use copy inline instead.
• When the text to copy is short and visible, opt for manual copying instead.

Usage

The copy button can appear as an icon button or a labeled button.

The icon button should be used most often, as it allows a compact size and can be used anywhere where users can copy something (e.g. next to input fields or inside cards).

Preview

Code

import { CopyButton } from '@cimpress-ui/react';

export default function Demo() {
  return <CopyButton aria-label="Copy" value="text to copy" />;
}

Copy code Open in playground

The labeled button should be used only when copy is the main action. It is best for code blocks, JSON, or long paragraphs.

Preview

Copy

Code

import { CopyButton } from '@cimpress-ui/react';

export default function Demo() {
  return <CopyButton value="text to copy">Copy</CopyButton>;
}

Copy code Open in playground

The size, color, and interactivity follow the default button component properties. The copy button supports all standard button sizes (small, medium, large) to adapt to its placement in a UI. Only secondary and tertiary button variants should be used. The primary variant and the critical tone are not permitted.

Preview

CopyCopyCopy

CopyCopyCopy

Code

import { CopyButton, Stack } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Stack gap={16} direction="horizontal" align="center">
        <CopyButton value="text to copy" variant="secondary" size="small">
          Copy
        </CopyButton>
        <CopyButton value="text to copy" variant="secondary" size="medium">
          Copy
        </CopyButton>
        <CopyButton value="text to copy" variant="secondary" size="large">
          Copy
        </CopyButton>
      </Stack>
      <Stack gap={16} direction="horizontal" align="center">
        <CopyButton value="text to copy" variant="tertiary" size="small">
          Copy
        </CopyButton>
        <CopyButton value="text to copy" variant="tertiary" size="medium">
          Copy
        </CopyButton>
        <CopyButton value="text to copy" variant="tertiary" size="large">
          Copy
        </CopyButton>
      </Stack>
    </Stack>
  );
}

Copy code Open in playground

Formatting and layout

Placement

• Position the copy button near the content it relates to, minimizing visual distance so that users clearly understand what will be copied to the clipboard.
• Designed for use when the data is not displayed directly.
• Can appear next to inputs, text areas, or code blocks.
• Should align with the content it represents. Use right or bottom alignment for forms and code blocks.

Structure

• Do not alter the icon or the confirmation tooltip text.
• Do not use custom icons or messages that break consistency.

Do

CopyCopy JSONCopy code

Don't

Add to clipboard

Content writing

• Use the label “Copy” for buttons that copy blocks of content. Explicitly explain what will be copied so that the user always understands what will be copied, even if it’s not visible.
• Do not change the tooltip confirmation text.

Behaviors

Interaction

• The action triggers on press or on keyboard activation.
• The component provides:
  • Visual feedback (the icon changes to a checkmark).
  • Textual feedback (tooltip confirmation).
  • Automatic reset after a short delay.