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.
Hugo Marques
