Copy Button

[levithomason]

Feature Request

Problem description

It is common in UI to have a button that copies content to the clipboard. Currently, users need to repeatedly implement this behavior.

Proposed solution

• Create a component for handling copy to clipboard on click.
• Show a "copied" message with a timeout to restore the original text.

Pseudo Code Ideas

A copy prop could be applied to component where it makes sense.

<Button content='Click to copy' copy />

The prop could allow configuring the message shown on success/failure as well as the timeout:

<Button
  content='Click to copy'
  copy={{
    success: 'Coped!',
    failure: "Couldn't Copy",
    timeout: 1000,
  }}
/>

Could be achieved as a utility component:

<CopyToClipboard as={Button} />

// or

<CopyToClipboard>
  {() => ...}
</CopyToClipboard>

Uses cases to consider:

• A tooltip showing "Click to copy" and "Copied!" on click of the element the tool tip is pointing to.
• A button or other element which exchanges its text for "Copied!" on click and restores the original test.

[jurokapsiar]

Also, we can consider having a variant of input with the copy button.

Making the success/failure texts a required prop (instead of providing defaults) would force the developers to think about i18n.