Copy text buttom

Customizable Copy to Clipboard Button

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.

Customizable Copy to Clipboard Button