@contentful/f36-copybutton

---

title: 'CopyButton' type: 'component' status: 'stable' slug: /components/copy-button/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/copybutton' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-copybutton--default' typescript: ./src/CopyButton.tsx

import { Props } from '@contentful/f36-docs-utils'; import { CopyButton } from '@contentful/f36-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/f36-copybutton';

<CopyButton value="Lorem Ipsum" />

An example with a custom tooltip:

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

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

An example with custom tooltip placement and custom aria-label.

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

<CopyButton
  value="Lorem Ipsum"
  tooltipCopiedText="The text has been copied"
  tooltipText="Copy this text to clipboard"
  label="Copy 'Lorem Ipsum'."
  tooltipProps={{ placement: 'bottom', usePortal: true }}
/>

Accessibility

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

Props