Import
import { CopyButton } from '@contentful/f36-components';// orimport { 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
Use this ID to retrieve everything related to this content type via the API.
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.
This CopyButton can copy the value returned from the asynchronous call after it’s done loading
Accessibility
You can pass a custom aria-label
through the label
prop.
Props (API reference)
Open in StorybookName | 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 |