CopyButton

Import

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

Examples

Basic

Hide code
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" />
  );
}
Open in Playground

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.

Hide code
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 }}
    />
  );
}
Open in Playground

Using with TextInput

Hide code
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>
  );
}
Open in Playground

Accessibility

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