Copy to Clipboard - Launchpad

Basic copy button

Compose with existing lp-btn classes. Pass the payload via data-lp-text.

<p class="lp-text-sm lp-text-muted lp-mb-3">Compose with existing <code class="lp-code">lp-btn</code> classes. Pass the payload via <code class="lp-code">data-lp-text</code>.</p>
<div class="lp-demo-row">
    <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-sm"
            data-lp-component="copy" data-lp-text="Hello, world!"
            aria-label="Copy greeting">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
    </button>

    <button type="button" class="lp-btn lp-btn-outline-primary lp-btn-sm"
            data-lp-component="copy" data-lp-text="npm install @launchpad/ui">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Copy command</span>
    </button>

    <button type="button" class="lp-btn lp-btn-primary lp-btn-sm"
            data-lp-component="copy" data-lp-text="PROMO2024">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Copy promo code</span>
    </button>
</div>

Copy from input

Point data-lp-target at any input by CSS selector; its .value is what gets copied.

API key

Share link

<p class="lp-text-sm lp-text-muted lp-mb-3">Point <code class="lp-code">data-lp-target</code> at any input by CSS selector; its <code class="lp-code">.value</code> is what gets copied.</p>
<div class="lp-row lp-g-3">
    <div class="lp-col-md-6">
        <div class="lp-form-group lp-mb-0">
            <label class="lp-form-label">API key</label>
            <div class="lp-input-group">
                <input type="text" id="copy-demo-api-key" class="lp-form-control" value="sk-launchpad-abc123xyz789" readonly>
                <button type="button" class="lp-btn lp-btn-outline-primary"
                        data-lp-component="copy" data-lp-target="#copy-demo-api-key"
                        aria-label="Copy API key">
                    <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
                </button>
            </div>
        </div>
    </div>
    <div class="lp-col-md-6">
        <div class="lp-form-group lp-mb-0">
            <label class="lp-form-label">Share link</label>
            <div class="lp-input-group">
                <input type="text" id="copy-demo-share-link" class="lp-form-control" value="https://launchpad.local/share/abc123" readonly>
                <button type="button" class="lp-btn lp-btn-outline-primary"
                        data-lp-component="copy" data-lp-target="#copy-demo-share-link"
                        aria-label="Copy share link">
                    <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
                </button>
            </div>
        </div>
    </div>
</div>

Inline copy

Wrap the token and button in .lp-copy-inline. Default: the button fades in on hover/focus. Add .lp-copy-inline-show to keep it always visible at 60% opacity.

Hover the code to reveal the button — your discount code is SAVE20 .

Always-visible variant — your order ID is ORD-2026-ABC123 .

<p class="lp-text-sm lp-text-muted lp-mb-3">Wrap the token and button in <code class="lp-code">.lp-copy-inline</code>. Default: the button fades in on hover/focus. Add <code class="lp-code">.lp-copy-inline-show</code> to keep it always visible at 60% opacity.</p>
<p class="lp-mb-2">Hover the code to reveal the button — your discount code is
    <span class="lp-copy-inline">
        <code class="lp-code">SAVE20</code>
        <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-xs"
                data-lp-component="copy" data-lp-target="previous"
                aria-label="Copy discount code">
            <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        </button>
    </span>.
</p>
<p class="lp-mb-0">Always-visible variant — your order ID is
    <span class="lp-copy-inline lp-copy-inline-show">
        <code class="lp-code">ORD-2026-ABC123</code>
        <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-xs"
                data-lp-component="copy" data-lp-target="previous"
                aria-label="Copy order id">
            <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        </button>
    </span>.
</p>

Target shortcuts

data-lp-target also accepts three keywords in addition to any CSS selector:

self — copies the trigger's own text (e.g. a chip whose label is the payload)
parent — copies the trigger's parent element text
previous — copies the immediately preceding sibling (used in the inline example above)

<p class="lp-text-sm lp-text-muted lp-mb-3"><code class="lp-code">data-lp-target</code> also accepts three keywords in addition to any CSS selector:</p>
<ul class="lp-mb-3">
    <li><code class="lp-code">self</code> — copies the trigger's own text (e.g. a chip whose label is the payload)</li>
    <li><code class="lp-code">parent</code> — copies the trigger's parent element text</li>
    <li><code class="lp-code">previous</code> — copies the immediately preceding sibling (used in the inline example above)</li>
</ul>
<div class="lp-demo-row">
    <button type="button" class="lp-btn lp-btn-soft-info lp-btn-sm"
            data-lp-component="copy" data-lp-target="self">#launchpad</button>
    <button type="button" class="lp-btn lp-btn-soft-info lp-btn-sm"
            data-lp-component="copy" data-lp-target="self">hitesh@example.com</button>
</div>

Button sizes

Copy triggers inherit the standard xs, sm, default, and lg size classes.

xs sm default lg

<p class="lp-text-sm lp-text-muted lp-mb-3">Copy triggers inherit the standard <code class="lp-code">xs</code>, <code class="lp-code">sm</code>, default, and <code class="lp-code">lg</code> size classes.</p>
<div class="lp-demo-row lp-align-items-center">
    <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-xs"
            data-lp-component="copy" data-lp-text="Extra small">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
    </button>
    <span class="lp-text-muted lp-text-sm">xs</span>

    <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-sm"
            data-lp-component="copy" data-lp-text="Small">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
    </button>
    <span class="lp-text-muted lp-text-sm">sm</span>

    <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost"
            data-lp-component="copy" data-lp-text="Default">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
    </button>
    <span class="lp-text-muted lp-text-sm">default</span>

    <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-lg"
            data-lp-component="copy" data-lp-text="Large">
        <span class="material-symbols-rounded">content_copy</span>
    </button>
    <span class="lp-text-muted lp-text-sm">lg</span>
</div>

Button variants

Copy triggers work with every button variant — ghost is the most common for tight layouts.

<p class="lp-text-sm lp-text-muted lp-mb-3">Copy triggers work with every button variant — ghost is the most common for tight layouts.</p>
<div class="lp-demo-row">
    <button type="button" class="lp-btn lp-btn-ghost lp-btn-sm"
            data-lp-component="copy" data-lp-text="Ghost payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Ghost</span>
    </button>
    <button type="button" class="lp-btn lp-btn-outline-primary lp-btn-sm"
            data-lp-component="copy" data-lp-text="Outline primary payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Outline primary</span>
    </button>
    <button type="button" class="lp-btn lp-btn-primary lp-btn-sm"
            data-lp-component="copy" data-lp-text="Primary payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Primary</span>
    </button>
    <button type="button" class="lp-btn lp-btn-soft-primary lp-btn-sm"
            data-lp-component="copy" data-lp-text="Soft primary payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Soft primary</span>
    </button>
    <button type="button" class="lp-btn lp-btn-success lp-btn-sm"
            data-lp-component="copy" data-lp-text="Success payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Success</span>
    </button>
    <button type="button" class="lp-btn lp-btn-info lp-btn-sm"
            data-lp-component="copy" data-lp-text="Info payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Info</span>
    </button>
    <button type="button" class="lp-btn lp-btn-danger lp-btn-sm"
            data-lp-component="copy" data-lp-text="Danger payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Danger</span>
    </button>
    <button type="button" class="lp-btn lp-btn-warning lp-btn-sm"
            data-lp-component="copy" data-lp-text="Warning payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Warning</span>
    </button>
    <button type="button" class="lp-btn lp-btn-dark lp-btn-sm"
            data-lp-component="copy" data-lp-text="Dark payload">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Dark</span>
    </button>
</div>

Practical examples

Real-world composition — no extra CSS, just existing lp-* components.

API keys

Public key

pk_live_abc123xyz789

Color codes

#1a73e8

#34a853

#ea4335

Code snippet with header

code JavaScript

const greeting = "Hello, world!";
console.log(greeting);

Tracking information

local_shipping

Tracking number

1Z999AA10123456784

    <p class="lp-text-sm lp-text-muted lp-mb-4">Real-world composition — no extra CSS, just existing <code class="lp-code">lp-*</code> components.</p>

    <!-- API key card -->
    <h6 class="lp-mb-2">API keys</h6>
    <div class="lp-card lp-mb-4" style="max-width: 500px;">
        <div class="lp-card-body">
            <div class="lp-d-flex lp-justify-content-between lp-align-items-center lp-mb-2">
                <span class="lp-text-muted lp-text-sm">Public key</span>
                <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-xs"
                        data-lp-component="copy" data-lp-text="pk_live_abc123xyz789"
                        aria-label="Copy public key">
                    <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
                </button>
            </div>
            <code class="lp-code">pk_live_abc123xyz789</code>
        </div>
    </div>

    <!-- Color swatches -->
    <h6 class="lp-mb-2">Color codes</h6>
    <div class="lp-demo-row lp-mb-4">
        <div class="lp-d-inline-flex lp-align-items-center lp-gap-2" style="padding: .4rem .6rem; border: 1px solid var(--lp-border); border-radius: var(--lp-radius-md);">
            <span style="width: 20px; height: 20px; border-radius: 4px; background: #1a73e8; display: inline-block;"></span>
            <code class="lp-code">#1a73e8</code>
            <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-xs"
                    data-lp-component="copy" data-lp-text="#1a73e8" aria-label="Copy color">
                <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
            </button>
        </div>
        <div class="lp-d-inline-flex lp-align-items-center lp-gap-2" style="padding: .4rem .6rem; border: 1px solid var(--lp-border); border-radius: var(--lp-radius-md);">
            <span style="width: 20px; height: 20px; border-radius: 4px; background: #34a853; display: inline-block;"></span>
            <code class="lp-code">#34a853</code>
            <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-xs"
                    data-lp-component="copy" data-lp-text="#34a853" aria-label="Copy color">
                <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
            </button>
        </div>
        <div class="lp-d-inline-flex lp-align-items-center lp-gap-2" style="padding: .4rem .6rem; border: 1px solid var(--lp-border); border-radius: var(--lp-radius-md);">
            <span style="width: 20px; height: 20px; border-radius: 4px; background: #ea4335; display: inline-block;"></span>
            <code class="lp-code">#ea4335</code>
            <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-xs"
                    data-lp-component="copy" data-lp-text="#ea4335" aria-label="Copy color">
                <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
            </button>
        </div>
    </div>

    <!-- Code block with header -->
    <h6 class="lp-mb-2">Code snippet with header</h6>
    <div class="lp-card lp-mb-4" style="max-width: 600px;">
        <div class="lp-card-header lp-d-flex lp-justify-content-between lp-align-items-center">
            <span class="lp-d-inline-flex lp-align-items-center lp-gap-1 lp-text-sm">
                <span class="material-symbols-rounded lp-icon-sm">code</span> JavaScript
            </span>
            <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-sm"
                    data-lp-component="copy" data-lp-target="#copy-demo-snippet"
                    aria-label="Copy code">
                <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
            </button>
        </div>
        <pre class="lp-mb-0" style="padding: .75rem 1rem; margin: 0; background: var(--lp-surface-alt, transparent);"><code id="copy-demo-snippet">const greeting = "Hello, world!";
console.log(greeting);</code></pre>
    </div>

    <!-- Tracking number inside alert -->
    <h6 class="lp-mb-2">Tracking information</h6>
    <div class="lp-alert lp-alert-info" style="max-width: 420px;">
        <span class="material-symbols-rounded">local_shipping</span>
        <div class="lp-flex-1">
            <div class="lp-text-sm lp-mb-1">Tracking number</div>
            <div class="lp-d-flex lp-align-items-center lp-gap-2">
                <strong>1Z999AA10123456784</strong>
                <button type="button" class="lp-btn lp-btn-icon lp-btn-ghost lp-btn-xs"
                        data-lp-component="copy" data-lp-text="1Z999AA10123456784"
                        aria-label="Copy tracking number">
                    <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
                </button>
            </div>
        </div>
    </div>

Custom feedback text & duration

Override with data-lp-success-text, data-lp-error-text, data-lp-feedback-duration (ms), or suppress the bubble with data-lp-show-feedback="false".

<p class="lp-text-sm lp-text-muted lp-mb-3">Override with <code class="lp-code">data-lp-success-text</code>, <code class="lp-code">data-lp-error-text</code>, <code class="lp-code">data-lp-feedback-duration</code> (ms), or suppress the bubble with <code class="lp-code">data-lp-show-feedback="false"</code>.</p>
<div class="lp-demo-row">
    <button type="button" class="lp-btn lp-btn-success lp-btn-sm"
            data-lp-component="copy" data-lp-text="Licensed to you."
            data-lp-success-text="Saved to clipboard"
            data-lp-feedback-duration="3000">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Long feedback (3s)</span>
    </button>
    <button type="button" class="lp-btn lp-btn-primary lp-btn-sm"
            data-lp-component="copy" data-lp-text="Quick flash"
            data-lp-feedback-duration="800">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>Quick flash (0.8s)</span>
    </button>
    <button type="button" class="lp-btn lp-btn-outline-primary lp-btn-sm"
            data-lp-component="copy" data-lp-text="Silent copy"
            data-lp-show-feedback="false">
        <span class="material-symbols-rounded lp-icon-sm">content_copy</span>
        <span>No bubble</span>
    </button>
</div>

JavaScript API

Every trigger auto-initializes from its data-lp-component attribute. For programmatic control, grab the instance with Launchpad.Copy.find(el) or .create(el), then call .copy().

const btn = document.getElementById("my-copy-btn");
const instance = Launchpad.Copy.find(btn) || Launchpad.Copy.create(btn);
instance.copy();

Listening to events

Each successful copy dispatches a bubbling lp:copy:copied event carrying detail.text; failures emit lp:copy:error with detail.error.

— no events yet —

<button data-lp-component="copy" data-lp-text="Hello" id="my-copy">Copy</button>

<script>
document.getElementById("my-copy").addEventListener("lp:copy:copied", function (e) {
    console.log("copied:", e.detail.text);
});
</script>

Configuration options

Every option can be set via the matching data-lp-* attribute (camelCase → kebab-case) or passed to Launchpad.Copy.create(el, options).

Option	Data attribute	Default	Description
`text`	`data-lp-text`	`null`	Direct string to copy. Takes precedence over `target`.
`target`	`data-lp-target`	`null`	CSS selector, or one of `self` / `parent` / `previous`. Inputs copy `.value`, selects copy the selected option text, otherwise `textContent`.
`feedbackDuration`	`data-lp-feedback-duration`	`2000`	Milliseconds the success/error state persists.
`successIcon`	`data-lp-success-icon`	`"check"`	Material Symbols icon name shown during success feedback (empty string disables swap).
`successText`	`data-lp-success-text`	`"Copied!"`	Bubble text on success.
`errorText`	`data-lp-error-text`	`"Failed"`	Bubble text on failure.
`showFeedback`	`data-lp-show-feedback`	`true`	Toggle the floating bubble. Icon swap and state class still run.