@contentful/f36-copybutton

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

Copy text to the clipboard.

Place it at the right bottom end of the text you want users to copy.

Import

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

Examples

Basic

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.

Using with TextInput

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.

Accessibility

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

Props (API reference)