CopyButton

Import

import { CopyButton } from '@contentful/f36-components';
// or
import { CopyButton } 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

Using with promises

Sometimes you want to await a Promise before know the value to copy to the clipboard. You can do this in the code where the copy button is implemented.

Hide code
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck -- disable checking since we cant cast the Promise return type in examples



function CopyButtonWithPromiseExample() {
  const [value, setValue] = useState();
  const [isLoading, setIsLoading] = useState(false);

  // In your application this could be any async function returning a string to
  // copy to the clipboard
  const asyncValue = () =>
    new Promise((resolve) =>
      setTimeout(resolve, 5000, 'A value that you will have to wait for'),
    );

  useEffect(() => {
    async function loadValue() {
      setIsLoading(true);
      const resolvedValue = await asyncValue();
      setValue(resolvedValue);
      setIsLoading(false);
    }

    loadValue();
  }, []);

  const hasValue = typeof value !== 'undefined';

  return (
    <Flex flexDirection="column" gap="spacingM">
      <Flex alignItems="center" flexDirection="column">
        <Paragraph>
          This CopyButton can copy the value returned from the asynchronous call
          after it&rsquo;s done loading
        </Paragraph>
        <CopyButton
          isDisabled={!hasValue}
          isLoading={isLoading}
          value={hasValue ? value : ''}
        />
      </Flex>
    </Flex>
  );
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck -- disable checking since we cant cast the Promise return type in examples



function CopyButtonWithPromiseExample() {
  const [value, setValue] = useState();
  const [isLoading, setIsLoading] = useState(false);

  // In your application this could be any async function returning a string to
  // copy to the clipboard
  const asyncValue = () =>
    new Promise((resolve) =>
      setTimeout(resolve, 5000, 'A value that you will have to wait for'),
    );

  useEffect(() => {
    async function loadValue() {
      setIsLoading(true);
      const resolvedValue = await asyncValue();
      setValue(resolvedValue);
      setIsLoading(false);
    }

    loadValue();
  }, []);

  const hasValue = typeof value !== 'undefined';

  return (
    <Flex flexDirection="column" gap="spacingM">
      <Flex alignItems="center" flexDirection="column">
        <Paragraph>
          This CopyButton can copy the value returned from the asynchronous call
          after it&rsquo;s done loading
        </Paragraph>
        <CopyButton
          isDisabled={!hasValue}
          isLoading={isLoading}
          value={hasValue ? value : ''}
        />
      </Flex>
    </Flex>
  );
}
Open in Playground

Accessibility

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