---
title: 'CopyOnClick'
description: 'Use CopyOnClick when people should copy text by clicking it.'
version: 0.0.0-development
generatedAt: 2026-10-22T16:06:36.983Z
checksum: a15bed356695510abc7677df25e8950a48684684891c358d837b3c925f7506f5
---

# CopyOnClick

## Import

```tsx
import { CopyOnClick } from '@dnb/eufemia'
```

## Description

The `CopyOnClick` component provides a convenient way to copy text to the clipboard with a single click. This component is particularly useful in scenarios where users need to quickly copy text, such as when copying codes, IDs, URLs, or any other text content that needs to be easily shared or reused.
Upon hovering, the component can optionally provide visual feedback to the user, displaying a copy cursor or other visual cues that indicate the component's functionality.
Upon clicking, the component provides a visual feedback to the user, displaying a tooltip with a confirmation message, indicating that the text has been successfully copied.

## Accessibility

`CopyOnClick` only works with a mouse or touch. It is not reachable with the keyboard, and screen readers do not announce that the text can be copied. So do not use it as the only way to copy.

Use `CopyOnClick.Button` instead, or together with `CopyOnClick`. It is a [Button](/uilib/components/button) that copies the given `copyContent` and shows the same confirmation tooltip, which screen readers also announce.

The default `title`, the translation `CopyOnClick.buttonTitle`, only says "Copy". Give each button a `title` that describes what it copies, such as "Copy account number", so people using a screen reader can tell several copy buttons apart.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/copy-on-click)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/copy-on-click)

### Example

Here’s a simple usage example of the `CopyOnClick` component:

```jsx
import { CopyOnClick, P } from '@dnb/eufemia'
render(
  <P>
    <CopyOnClick>This is the text to copy!</CopyOnClick>
  </P>
)
```

And with a copy button:

```jsx
import { CopyOnClick } from '@dnb/eufemia'
render(
  <CopyOnClick.Button
    copyContent="70321369861"
    title="Copy account number"
  />
)
```


## Related components

CopyOnClick is part of the [Other](/uilib/components/overview/#other) category. Other components for similar needs:

- [HeightAnimation](/uilib/components/height-animation/) – to animate content as it opens or closes.
- [PortalRoot](/uilib/components/portal-root/) – to render floating content outside the normal page structure.
- [ScrollView](/uilib/components/scroll-view/) – when content needs its own horizontal or vertical scrolling area.


## Demos

### Default


```tsx
render(<P>
        <CopyOnClick>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          cursus pharetra elit in bibendum. Praesent nunc ipsum, convallis
          eget convallis gravida, vehicula vitae metus.
        </CopyOnClick>
      </P>)
```


### Copy button

Use `CopyOnClick.Button` so people can also copy with the keyboard. Give it a `title` that describes what it copies, such as "Copy account number". You can combine it with `CopyOnClick` on the text.

The button copies `copyContent` as it is. To copy a formatted value, pass the string from a [NumberFormat formatter](/uilib/components/number-format/#formatter-utilities), such as `formatCurrency(1234567.89)`.


```tsx
render(<Flex.Horizontal align="center" gap="x-small">
        <CopyOnClick copyContent="70321369861">7032 1369 861</CopyOnClick>
        <CopyOnClick.Button copyContent="70321369861" title="Copy account number" />
      </Flex.Horizontal>)
```


### Cursor hidden


```tsx
render(<P>
        <CopyOnClick showCursor={false}>
          Praesent nunc ipsum, convallis eget convallis gravida, vehicula
          vitae metus.
        </CopyOnClick>
      </P>)
```


### Copy content

Used when the copied value should differ from the visually shown value (`children`).


```tsx
render(<P>
        <CopyOnClick copyContent="content to copy">
          content to display
        </CopyOnClick>
      </P>)
```


### Copy text content

If `children` is a React element that cannot be directly converted to a string, the component will copy the rendered text content (`textContent`) instead.


```tsx
render(<P>
        <CopyOnClick>
          <NumberFormat.Currency value={1234567.89} currency="NOK" />
        </CopyOnClick>
      </P>)
```


### Custom message shown in the tooltip when content is copied


```tsx
render(<P>
        <CopyOnClick tooltipContent="Custom message">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          cursus pharetra elit in bibendum. Praesent nunc ipsum, convallis
          eget convallis gravida, vehicula vitae metus.
        </CopyOnClick>
      </P>)
```

## Properties

### `CopyOnClick` properties


```json
{
  "props": {
    "showCursor": {
      "doc": "Define if the copy cursor should be visible. Defaults to `true`.",
      "type": "boolean",
      "status": "optional"
    },
    "disabled": {
      "doc": "If `true`, the copy functionality and copy cursor will be omitted. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "copyContent": {
      "doc": "Contents to copy. Used when the copied value should differ from the visually shown value(`children`).",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "tooltipContent": {
      "doc": "The message shown in the tooltip when the content is copied. Defaults to the translation `CopyOnClick.clipboardCopy`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "children": {
      "doc": "Contents.",
      "type": "React.ReactNode",
      "status": "required"
    }
  }
}
```


### `CopyOnClick.Button` properties


```json
{
  "props": {
    "copyContent": {
      "doc": "The text to copy.",
      "type": [
        "string",
        "number"
      ],
      "status": "required"
    },
    "title": {
      "doc": "Describes what the button copies, such as \"Copy account number\". When the button has no text, it is also used as the `aria-label` and defaults to the translation `CopyOnClick.buttonTitle`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "tooltipContent": {
      "doc": "The message shown in the tooltip when the content is copied. Defaults to the translation `CopyOnClick.clipboardCopy`.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "icon": {
      "doc": "Icon displayed on the button. Defaults to the `copy` icon.",
      "type": "IconIcon",
      "status": "optional"
    },
    "variant": {
      "doc": "Button variant. Defaults to `tertiary`.",
      "type": [
        "\"primary\"",
        "\"secondary\"",
        "\"tertiary\""
      ],
      "status": "optional"
    },
    "[Button](/uilib/components/button/properties)": {
      "doc": "All button properties. A `tooltip` is hidden while the copy confirmation is shown.",
      "type": "Various",
      "status": "optional"
    }
  }
}
```


## Translations


```json
{
  "locales": [
    "da-DK",
    "en-GB",
    "nb-NO",
    "sv-SE"
  ],
  "entries": {
    "CopyOnClick.buttonTitle": {
      "nb-NO": "Kopier",
      "en-GB": "Copy",
      "sv-SE": "Kopiera",
      "da-DK": "Kopiér"
    },
    "CopyOnClick.clipboardCopy": {
      "nb-NO": "Kopiert",
      "en-GB": "Copied",
      "sv-SE": "Kopierad",
      "da-DK": "Kopieret"
    }
  }
}
```