Copy text buttom

Framer includes a basic copy to clipboard component, but it offers little room for customization.

This component is built to fill that gap. It covers the same core interaction — clicking copies text to the clipboard — but exposes every visual detail as a property control so it fits any design out of the box.

What you can control:

• The label shown on the button and the text written to the clipboard, independently

• A separate success label shown after the copy completes, with its own icon

• Full typography via Framer's native Font control, including family, size, weight, and letter spacing

• Fill, border, and text color for the normal, hover, and success states, each grouped in their own panel section

• Custom SVG icons for both the default and success states, with automatic color inheritance so they always match your text color

• Icon size, position (before or after the label), and gap between icon and text

• Padding and border radius via Framer's native controls

• A Tracking ID that fires a Framer analytics event on every successful copy

The button locks its width to the normal state size, so the layout never shifts when the success label appears. It's a drop-in replacement for the native component, with the customization options the native one is missing.