CopyOnClick#

Demos#

Default#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus.

<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, such as formatCurrency(1234567.89).

7032 1369 861

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

Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus.

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

content to display

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

<P>
  <CopyOnClick>
    <NumberFormat.Currency value={1234567.89} currency="NOK" />
  </CopyOnClick>
</P>

Custom message shown in the tooltip when content is copied#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum. Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus.

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

Suggest an edit