import { Props } from '@contentful/f36-docs-utils';
import { CopyButton } from '@contentful/f36-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
<CopyButton value="Lorem Ipsum" />
An example with a custom tooltip:
<CopyButton
value="Lorem Ipsum"
tooltipCopiedText="The text has been copied"
tooltipText="Copy this text to clipboard"
/>
An example with custom tooltip placement and custom aria-label.
<CopyButton
value="Lorem Ipsum"
tooltipCopiedText="The text has been copied"
tooltipText="Copy this text to clipboard"
label="Copy 'Lorem Ipsum'."
tooltipProps={{ placement: 'bottom', usePortal: true }}
/>
Accessibility
You can pass a custom aria-label
through the label
prop.
Props