Copy inline usage guidelines

The CopyInline component shows read-only information and allows users to quickly copy that data to their clipboard.

When to use

• For unique codes that users need to quickly copy, like Product IDs, asset IDs, or order numbers.
• For short, fixed strings of data or code that shouldn’t be edited but could be copied.
• When the data is part of a paragraph.

When not to use

• For large blocks of text or code. Use a dedicated code block or text area with a separate copy button instead.
• When the copied data is not visible or is a link, use copy button instead.

Properties

The CopyInline component displays text with a fixed icon on the right side. Icon size is based on the text size and cannot be customized. When the user copies the value to the clipboard, the icon changes to a checkmark, and a confirmation tooltip appears over it.

Preview

Product ID:82eadcc0-022f-4f97-b12a-e4a9ef4c66f4⁠

Code

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

export default function Demo() {
  return (
    <Stack gap={8} align="start">
      <Text as="strong" variant="body-semibold">
        Product ID:
      </Text>
      <CopyInline>82eadcc0-022f-4f97-b12a-e4a9ef4c66f4</CopyInline>
    </Stack>
  );
}

Copy code Open in playground

Sizes

CopyInline supports all text sizes and variants available in Cimpress UI. The text and the icon automatically scale to match the current text size.

Preview

This paragraph contains a copyable text⁠ that inherits its style.

This paragraph also contains a copyable text⁠ that inherits its style.

Code

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

export default function Demo() {
  return (
    <Stack gap={16}>
      <Text as="p" variant="title-5" tone="base">
        This paragraph contains a <CopyInline>copyable text</CopyInline> that inherits its style.
      </Text>

      <Text as="p" variant="medium" tone="subtle" fontStyle="italic">
        This paragraph also contains a <CopyInline>copyable text</CopyInline> that inherits its style.
      </Text>
    </Stack>
  );
}

Copy code Open in playground

Formatting and layout

Placement

The component is designed to be inline and compact, ideal for embedding within lists, data tables, or configuration forms where users need to quickly copy information. CopyInline should always appear next to the data label or to the value that it represents.

Preview

Product category	Product ID	Sales
T-shirts	CIM-12345678⁠	123
Business cards	CIM-74859612⁠	456
Flyers	CIM-87654321⁠	789

Toggle sort order of column:

Code

import {
  CopyInline,
  Table,
  TableBody,
  TableBodyCell,
  TableBodyRow,
  TableContainer,
  TableHeader,
  TableHeaderCell,
  TableHeaderRow,
} from '@cimpress-ui/react';

const productTable = [
  { id: 'CIM-12345678', category: 'T-shirts', sales: 123 },
  { id: 'CIM-74859612', category: 'Business cards', sales: 456 },
  { id: 'CIM-87654321', category: 'Flyers', sales: 789 },
];

export default function Demo() {
  return (
    <TableContainer>
      <Table aria-label="Product table example">
        <TableHeader>
          <TableHeaderRow>
            <TableHeaderCell columnKey="category">Product category</TableHeaderCell>
            <TableHeaderCell columnKey="id">Product ID</TableHeaderCell>
            <TableHeaderCell columnKey="sales">Sales</TableHeaderCell>
          </TableHeaderRow>
        </TableHeader>
        <TableBody>
          {productTable.map(({ id, category, sales }) => (
            <TableBodyRow key={id}>
              <TableBodyCell columnKey="category">{category}</TableBodyCell>
              <TableBodyCell columnKey="id">
                <CopyInline>{id}</CopyInline>
              </TableBodyCell>
              <TableBodyCell columnKey="sales">{sales}</TableBodyCell>
            </TableBodyRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Copy code Open in playground

Spacing

• Never alter the spacing between the icon and the text.
• When used in groups or lists, keep the spacing consistent.

Content writing

• The value to be copied should be displayed in full. For longer pieces of text, use a separate copy button instead.
• Do not alter the tooltip confirmation text.

Behaviors

Interaction

• The copy function is activated when the user presses either the copy icon or the copyable text.
• When hovering over the component, the copyable text is highlighted.
• After a successful copy, the copy icon changes to a checkmark icon, and a confirmation tooltip is shown.
• After a short delay the component returns to its base state, showing the copy icon again.