CopyButton

The CopyButton is a styled button that copies text into the user's clipboard. This is useful in combination with for example tables or inputs that show values that the user is likely to use elsewhere, such as automatically generated passwords.

Table of contents

• How to use CopyButton
• Code examples
• Content recommendations
• Accessibility

How to use CopyButton

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.

Code examples

// import { CopyButton } from '@contentful/forma-36-react-components';

<CopyButton copyValue="Lorem Ipsum" />
// import { CopyButton } from '@contentful/forma-36-react-components';

<CopyButton copyValue="Lorem Ipsum" />
Hide source

An example with a custom tooltip:

// import { CopyButton } from '@contentful/forma-36-react-components';

<CopyButton
  copyValue="Lorem Ipsum"
  tooltipCopiedText="The text has been copied"
  tooltipText="Copy this text to clipboard"
/>
// import { CopyButton } from '@contentful/forma-36-react-components';

<CopyButton
  copyValue="Lorem Ipsum"
  tooltipCopiedText="The text has been copied"
  tooltipText="Copy this text to clipboard"
/>
Hide source