# code-block-pro/1.10.0/src/front/CopyButton.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.10.0. 35 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.10.0/code/src/front/CopyButton.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.10.0/raw/src/front/CopyButton.tsx
- Modified: 2022-08-22T22:25:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.10.0/code/src/front/CopyButton.tsx#L10-L20`.

```tsx
import { __ } from '@wordpress/i18n';
import { Attributes } from '../types';

export const CopyButton = ({ attributes }: { attributes: Attributes }) => (
    <span
        // Using a span to prevent aggressive button styling from themes
        role="button"
        tabIndex={0}
        data-code={attributes.code}
        style={{ color: attributes?.textColor ?? 'inherit', display: 'none' }}
        aria-label={__('Copy', 'code-block-pro')}
        className="code-block-pro-copy-button">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            style={{ width: 24, height: 24 }}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth="2">
            <path
                className="with-check"
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
            />
            <path
                className="without-check"
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
            />
        </svg>
    </span>
);

```