Copy to Clipboard

Copy to Clipboard renders a button — or a read-only input paired with a button — that copies a preset text string to the visitor's clipboard on click. Use it for API keys, coupon codes, install commands, referral links, or any text visitors need to copy exactly.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Copy to Clipboard. The block drops in as a button-only layout with placeholder text.

Content

Display Mode controls the layout:

Input + Button is useful when you want visitors to see exactly what they're copying before they click. The input is always readonly — visitors cannot edit it.

• Text to Copy — the string sent to the clipboard. Any value: a URL, a command, a coupon code, a license key.
• Placeholder — visible only in Input + Button mode. Shown in the input when Text to Copy is empty.
• Button Label — text on the button before copying. Default Copy.
• Copied Label — text shown briefly after a successful copy. Default Copied!. The button reverts after 2 seconds.

Icon

Show Icon toggles the clipboard icon on the button. When enabled, Icon Position places it Left or Right of the label. The icon swaps to a checkmark when the copy succeeds and reverts when the button resets.

Style

Alignment positions the button or input row within the block: Left (default), Center, or Right. It's a per-device control — set it once for desktop and override it on tablet or mobile using the device switcher at the top of the control.

Button Style:

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the block does; Styles is how it looks, organised by the parts you can see.

Styling

• Button Color — the fill in Filled mode, or the border and text color in Outline mode. Default #7c3aed.
• Text Color — the label color in Filled mode. Default #ffffff.
• Copied background — the background the button flashes on a successful copy. Default #00a32a. In Outline mode the border switches to this color too.
• Typography — family, size, weight, line height, letter spacing, transform, and decoration for the label.
• Border — per-side width, style, and color.
• Radius — per-corner rounding, up to 40 px.
• Shadow — box shadow on the button.

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

HTML output

Button-only mode:

<div class="axiom-blocks-copy-to-clipboard axiom-blocks-copy-to-clipboard--align-left">
  <button
    class="axiom-blocks-copy-to-clipboard__button"
    type="button"
    data-text="npm install @axiom/blocks"
    data-success="Copied!"
    data-original="Copy"
    data-copied-bg="#00a32a"
    style="--ab-ctc-bg: #7c3aed; --ab-ctc-color: #ffffff; --ab-ctc-radius-tl: 4px; --ab-ctc-shadow: 0 1px 2px #0000001a;"
  >
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
    </svg>
    <span class="axiom-blocks-copy-to-clipboard__text">Copy</span>
  </button>
</div>

Input + button mode wraps both in .axiom-blocks-copy-to-clipboard__input-row, with a screen-reader-text label bound to the readonly <input class="axiom-blocks-copy-to-clipboard__input">. The button carries the same data-* attributes in either mode.

CSS custom properties