CopyButton

The CopyButton is a styled button that copies text into the user's clipboard.

CopyButton can be used in combination with text inputs where the input value should be easy to copy. In such cases it is best to position the CopyButton at the end of the input.

Import

import { CopyButton } from '@contentful/f36-components';
// or
import { ToggleButton } from '@contentful/f36-copybutton';

Examples

Basic

Open in Playground
function CopyButtonExample() {
  return (
    <CopyButton value="A value that will be put into clipboard when you click this button" />
  );
}
function CopyButtonExample() {
  return (
    <CopyButton value="A value that will be put into clipboard when you click this button" />
  );
}
Hide source

Changing the tooltip

You can modify tooltip text and its placement by using the following properties: tooltipCopiedText, tooltipText and tooltipProps.

To read more about all possible values of tooltipProps object, refer to Tooltip documentation.

Open in Playground
function CopyButtonModifiedTooltipsExample() {
  return (
    <CopyButton
      value="Copy value"
      tooltipCopiedText="The text has been copied"
      tooltipText="Copy this text to clipboard"
      tooltipProps={{ placement: 'bottom', usePortal: true }}
    />
  );
}
function CopyButtonModifiedTooltipsExample() {
  return (
    <CopyButton
      value="Copy value"
      tooltipCopiedText="The text has been copied"
      tooltipText="Copy this text to clipboard"
      tooltipProps={{ placement: 'bottom', usePortal: true }}
    />
  );
}
Hide source

Using with TextInput

Open in Playground
function CopyButtonWithInputExample() {
  const value = 'myContentTypeId';
  return (
    <Flex flexDirection="column">
      <Paragraph>
        Use this ID to retrieve everything related to this content type via the
        API.
      </Paragraph>
      <TextInput.Group>
        <TextInput isDisabled isReadOnly value={value} />
        <CopyButton
          value={value}
          tooltipProps={{ placement: 'right', usePortal: true }}
        />
      </TextInput.Group>
    </Flex>
  );
}
function CopyButtonWithInputExample() {
  const value = 'myContentTypeId';
  return (
    <Flex flexDirection="column">
      <Paragraph>
        Use this ID to retrieve everything related to this content type via the
        API.
      </Paragraph>
      <TextInput.Group>
        <TextInput isDisabled isReadOnly value={value} />
        <CopyButton
          value={value}
          tooltipProps={{ placement: 'right', usePortal: true }}
        />
      </TextInput.Group>
    </Flex>
  );
}
Hide source

Accessibility

You can pass a custom aria-label through the label prop.

Props (API reference)

• Name

  value(required)

  Description

  Value that will be copied to clipboard when the button is clicked

  string
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  isDisabled

  Description

  Allows to disable the copy button, when true the tooltip would not be shown

  false

  true
• Name

  label

  Description

  Label to be used on aria-label for the button

  string
• Name

  onCopy

  Description

  Function that gets called when the button is clicked

  (string: any) => void
• Name

  size

  Description

  Allows setting size of the copy button to small

  "small"

  "medium"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string
• Name

  tooltipCopiedText

  Description

  Text to be shown when the button is clicked

  string
• Name

  tooltipProps

  Description

  Props that are passed to the tooltip component

  Omit<TooltipProps, "content" | "children">
• Name

  tooltipText

  Description

  Text to be shown when button is hovered or focused

  string