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

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)

Open in Storybook

Name

Type

Default

value
required
string

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

as
HTML Tag or React Component (e.g. div, span, etc)

The element used for the root node.

button
children
ReactNode

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

isActive
false
true

Applies active styles

false
isDisabled
false
true

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

false
isFullWidth
false
true

Forces button to take 100% of the container

isLoading
false
true

Adds loading indicator icon and disables interactions

label
string

Label to be used on aria-label for the button

Copy to clipboard
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

medium
startIcon
ReactElement<any, string | JSXElementConstructor<any>>

Expects any of the icon components. Renders the icon aligned to the start

testId
string

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

tooltipCopiedText
string

Text to be shown when the button is clicked

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

Props that are passed to the tooltip component

tooltipText
string

Text to be shown when button is hovered or focused

Copy to clipboard
variant
"negative"
"positive"
"primary"
"secondary"
"transparent"

Determines style variation of Button component

secondary