Skip to content
github

Copy Button

The CopyButton component provides a button that copies text to the clipboard when clicked. It includes visual feedback to indicate when the text has been copied successfully. The name prop can be a string or a function that returns a string, allowing for dynamic text generation.

Copy Button with Function Callback

Below are examples showing how to use a function callback for dynamic text generation, including both success and error cases:

Installation

Basic Usage

import { CopyButton } from '@harnessio/ui/components'


return (
  <CopyButton name="Text to copy" />
)

Using Function Callback (Success Case)

You can pass a function to name that returns the text to copy. This is useful when the text needs to be computed dynamically:

import { CopyButton } from '@harnessio/ui/components'


const getTextToCopy = () => {
  // Compute or retrieve the text dynamically
  return `Current timestamp: ${Date.now()}`
}


return (
  <CopyButton name={getTextToCopy} />
)

Using Function Callback (Error Handling)

If the function throws an error, a toast notification will be displayed to the user:

import { CopyButton } from '@harnessio/ui/components'


const getTextToCopy = () => {
  // This might throw an error in some cases
  if (someCondition) {
    throw new Error('Failed to retrieve text')
  }
  return 'Text to copy'
}


return (
  <CopyButton name={getTextToCopy} />
)

When an error occurs, a toast with the title “Failed to copy” and the error message will be shown to the user.