ClipboardButton Edit

This component is deprecated. Please use the `useCopyToClipboard` hook from the `@wordpress/compose` package instead.

With a clipboard button, users copy text (or other elements) with a single click or tap.

Clipboard button component

Usage Usage

import { ClipboardButton } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyClipboardButton = () => {
    const [ hasCopied, setHasCopied ] = useState( false );
    return (
            text="Text to be copied."
            onCopy={ () => setHasCopied( true ) }
            onFinishCopy={ () => setHasCopied( false ) }
            { hasCopied ? 'Copied!' : 'Copy Text' }

Top ↑

Props Props

The component accepts the following props:

Top ↑

className className

The class that will be added to the classes of the underlying <Button> component.

  • Type: string
  • Required: no

Top ↑

text text

The text that will be copied to the clipboard.

  • Type: string
  • Required: yes

Top ↑

onCopy onCopy

The function that will be called when the text is copied.

— Type: () => void
— Required: yes

Top ↑

onFinishCopy onFinishCopy

The function that will be called when the text is copied and the copy animation is finished.

— Type: () => void
— Required: no

Top ↑

Inherited props Inherited props

Any additional props will be passed the underlying <Button/> component. See the Button component for more details on the available props.