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.
Usage Usage
import { ClipboardButton } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyClipboardButton = () => { const [ hasCopied, setHasCopied ] = useState( false ); return ( <ClipboardButton variant="primary" text="Text to be copied." onCopy={ () => setHasCopied( true ) } onFinishCopy={ () => setHasCopied( false ) } > { hasCopied ? 'Copied!' : 'Copy Text' } </ClipboardButton> ); };
Props Props
The component accepts the following props:
className className
The class that will be added to the classes of the underlying <Button>
component.
- Type:
string
- Required: no
text text
The text that will be copied to the clipboard.
- Type:
string
- Required: yes
onCopy onCopy
The function that will be called when the text is copied.
— Type: () => void
— Required: yes
onFinishCopy onFinishCopy
The function that will be called when the text is copied and the copy animation is finished.
— Type: () => void
— Required: no
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.