CopyButton

A button component that copies text to the clipboard when clicked, providing visual feedback on success.

Usage

The CopyButton is primarily used internally by the ProsePre component to provide copy functionality for code blocks. It can also be used standalone:

Copy::copy-button{value="npm install docs-please"}
::

How It Works

1. User clicks the copy button
2. The value prop content is copied to the clipboard
3. The icon changes from a copy icon to a check icon
4. After a brief delay, the icon returns to the copy state

In Code Blocks

CopyButton is automatically included in all fenced code blocks. When you write:

Copyconst hello = 'world'

A copy button appears in the top-right corner of the code block.

Props

Styling

The button displays:

• Copy icon (clipboard) in default state
• Check icon when content has been copied
• Positioned absolutely (typically top-right of parent)
• Subtle hover effect