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

Copy text to the clipboard.

Place it at the right bottom end of the text you want users to copy.

## Import

```js static=true
import { CopyButton } from '@contentful/f36-components';
// or
import { CopyButton } from '@contentful/f36-copybutton';
```

## Examples

### Basic

```jsx file=examples/CopyButtonExample.tsx

```

### 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](../components/tooltip) documentation.

```jsx file=examples/CopyButtonModifiedTooltipsExample.tsx

```

### Using with `TextInput`

```jsx file=examples/CopyButtonWithInputExample.tsx

```

### 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.

```jsx file=examples/CopyButtonWithPromiseExample.tsx

```

## Accessibility

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

## Props (API reference)

<PropsTable of="CopyButton" />