---
title: "Copy Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Richard de Jaroueh · Buttons. Copy Button A lightweight, fully customizable button that copies text or the current page URL with one click."
canonical: "https://framer.elliotli.dev/component/copy-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Copy Button

# Copy Button

[View on Framer](https://framer.com/marketplace/components/copy-button/?via=elliot-li)

![Copy Button preview image 1](https://framer.elliotli.dev/og/component/copy-button/c887863a8c2cf442/1600x1200.jpg)

## Summary

Copy Button A lightweight, fully customizable button that copies text or the current page URL with one click.

## Description

## Copy Button

A lightweight, fully customizable button that copies text or the current page URL with one click. Includes hover and active states, smooth fade transitions, optional icons, and full font control.It comes with idle, hover, and active states, smooth fade transitions, optional icons, and full typography control — so it always matches your design.

**Typical use cases**

-   Copy coupon codes, email addresses, or IDs
    
-   One-click share buttons (“Copy page URL”)
    
-   Micro-interactions for forms or tooltips
    

**How to use**

-   Drag the Copy Button onto your canvas
    
-   Choose whether it copies a custom value or the current page URL
    
-   Customize label text, copied state text, colors, borders, icons, and transitions
    
-   Adjust typography, padding, alignment, and radius to fit your style
    

**Features**

-   Idle, hover, and active (copied) states
    
-   Optional copy and checkmark icons
    
-   Smooth fade or instant switch between states
    
-   Full font control via Framer’s Font picker
    
-   Works with Hug (Fit) size for both width and height
    
-   Accessible: announces copy action to screen readers
    

**Performance**Lightweight and client-side only, no external dependencies.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4386

## Details

- **Author**: Richard de Jaroueh
- **Published**: 2025-09-18
- **Updated**: 2025-09-18
- **Added**: 2025-09-09
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything