This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

CopyButton

The CopyButton is a styled button that copies text into the user's clipboard. This is useful in combination with for example tables or inputs that show values that the user is likely to use elsewhere, such as automatically generated passwords.

Table of contents

How to use CopyButton

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.

Code examples

An example with a custom tooltip:

An example with custom tooltip placement and custom aria-label.

Accessibility

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

Props

NameRequiredDefaultTypeDescription
valuerequiredstringValue that will be copied to clipboard when the button is clicked
isDisabledfalse
false
true
Allows to disable the copy button, when true the tooltip would not be shown
labelCopy {value} to clipboardstringLabel to be used on aria-label for the button
onCopy(string: any) => voidFunction that gets called when the button is clicked
sizemedium
"small"
"medium"
Allows setting size of the copy button to small
tooltipCopiedTextCopied!stringText to be shown when the button is clicked
tooltipPropsOmit<TooltipProps, "content" | "children">Props that are passed to the tooltip component
tooltipTextCopy to clipboardstringText to be shown when button is hovered or focused
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes