@contentful/f36-copybutton

Forma 36: CopyButton component

Usage no npm install needed!

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

README

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

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

Accessibility

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