CopyButton

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

Accessibility

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

Props (API reference)

Open in Storybook

Name

Type

Default

value
required
string

Value that will be copied to clipboard when the button is clicked

className
string

CSS class to be appended to the root element

isDisabled
false
true

Allows to disable the copy button, when true the tooltip would not be shown

label
string

Label to be used on aria-label for the button

onCopy
(string: any) => void

Function that gets called when the button is clicked

size
"small"
"medium"

Allows setting size of the copy button to small

testId
string

A [data-test-id] attribute used for testing purposes

tooltipCopiedText
string

Text to be shown when the button is clicked

tooltipProps
Omit<TooltipProps, "content" | "children">

Props that are passed to the tooltip component

tooltipText
string

Text to be shown when button is hovered or focused