CopyButton

View on Github

The CopyButton is a styled button that copies text into the user's clipboard.

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.

Import

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

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