Skip to main content
Kaleidoscope

CopyToClipboard

HW

Copy any string to the user's clipboard on click

Buttons

Wrap a button and use the onCopy render prop for the button's onClick handler.

Editable example
<CopyToClipboard value="https://www.example.com">
  {({ onCopy }) => <Button onClick={onCopy}>Copy url</Button>}
</CopyToClipboard>

Menu items

When using with an OptionMenu make sure to also use closeOnClick={false} on the menu item to allow the user to see the copied tooltip.

Editable example
<OptionMenu button={<Button type={ButtonType.Secondary}>Option Menu</Button>}>
  <OptionMenuItem>A menu item</OptionMenuItem>
  <OptionMenuItem>Another item</OptionMenuItem>
  <CopyToClipboard value="https://www.example.com">
    {({ onCopy }) => (
      <OptionMenuItem closeOnClick={false} onClick={onCopy}>Copy link</OptionMenuItem>
    )}
  </CopyToClipboard>
</OptionMenu>

Custom tooltips

Set custom tooltip content or props using the tooltip and tooltipOnCopied props.

Editable example
<CopyToClipboard
  value="https://www.example.com"
  tooltip={{ content: "Custom copy tooltip" }}
  tooltipOnCopied={{ content: "Custom copied message" }}
>
  {({ onCopy }) => <Button onClick={onCopy}>Copy url</Button>}
</CopyToClipboard>

Only show tooltip on copy

Use this when the label of the button only says "Copy", making it redundant to show a tooltip with the same label on hover.

Editable example
<CopyToClipboard
  showTooltipOnCopy
  value="https://www.example.com"
>
  {({ onCopy }) => <Button onClick={onCopy}>Copy</Button>}
</CopyToClipboard>

Accessibility

Always pass onCopy to a <button> element or a component that renders a <button> element so that the action is accessible using only the keyboard.