Forma 36: CopyButton component

Usage no npm install needed!

<script type="module">
  import contentfulF36Copybutton from 'https://cdn.skypack.dev/@contentful/f36-copybutton';


title: 'CopyButton' type: 'component' status: 'stable' section: 'buttonComponents' slug: /components/copy-button/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/copybutton' typescript: ./src/CopyButton.tsx storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-copybutton--default'

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



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


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

Props (API reference)