See Pocket in your colourBlue

Pocket

A copy button that drops its label into the clipboard.

A UI component for any site
Plain HTML, CSS and JavaScript, no dependencies
Use it in unlimited client projects

Checkout opens soon.
14-day refund if it doesn’t do what the demo shows.

BundleEvery component: 26 pieces for $233, you save $78

Pocket: a look at the source

// Pocket — copy-to-clipboard button. No dependencies.
// Copies data-copy, or the text of the element matched by data-copy-target.

const EASE = 'cubic-bezier(.22, 1, .36, 1)';
const SPRING = 'cubic-bezier(.34, 1.56, .64, 1)';
const reducedMotion = () => matchMedia('(prefers-reduced-motion: reduce)').matches;

async function writeText(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    const ta = Object.assign(document.createElement('textarea'), { value: text });
    ta.setAttribute('readonly', '');
    ta.style.cssText = 'position:fixed;opacity:0;pointer-events:none';
    document.body.append(ta);
    ta.select();
    let ok = false;
    try { ok = document.execCommand('copy'); } catch {}
    ta.remove();
    return ok;
  }
}

export function init(root, { text, resetAfter = 1600, onCopy } = {}) {
  const label = root.querySelector('.pocket-label');
  const done = root.querySelector('.pocket-label-done');
  const icon = root.querySelector('.pocket-icon');
  const clip = root.querySelector('.pocket-clip');
  const check = root.querySelector('.pocket-check');
  const status = document.createElement('span');
  status.setAttribute('aria-live', 'polite');
  status.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)';
  root.append(status);

  let timer = 0;
  let running = [];
  const play = (el, frames, opts) => {
    const a = el.animate(frames, { fill: 'forwards', ...opts });
    running.push(a);
…  95 more lines in the zip

/* Pocket — a copy button that drops its label into the clipboard */
.pocket {
  --pocket-bg: #0b1220;
  --pocket-ink: #fff;
  --pocket-done: #34c759;
  --pocket-accent: #007aff;
  --pocket-h: 40px;
  --pocket-font: "SF Pro Text", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  appearance: none;
  border: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--pocket-h);
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: var(--pocket-bg);
  color: var(--pocket-ink);
  font: 600 14px/1 var(--pocket-font);
  letter-spacing: -.01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 8px 20px -10px rgb(11 18 32 / .6);
  transition: scale 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.pocket:active { scale: .96; }
.pocket:focus-visible { outline: 2px solid var(--pocket-accent); outline-offset: 2px; }

.pocket-icon { position: relative; width: 18px; height: 18px; flex: none; }
.pocket-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pocket-check {
  stroke: var(--pocket-done);
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
}

/* the two labels share one slot, so the button is as wide as the longer word and never jumps */
…  23 more lines in the zip

Ask a question

What it does

A copy-to-clipboard button for code snippets, API keys, coupon codes or links. When you click it, the word "Copy" flies into the clipboard icon, the clipboard catches it with a small dip, and a check mark is drawn.

Good for: Docs sites, developer tools, dashboards that show API keys, coupon and referral pages.
How it works: Set data-copy or point data-copy-target at an element. One click copies the text, plays the animation and returns to "Copy" after 1.6 seconds.
How to use: Copy two files, paste the button, call initAll().

Price: $5, one payment
Version: 1.0.0
Code size: 2.5 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript
Category: Button
Licence: Unlimited personal and client projects
In the zip: pocket.css pocket.jsthe component
index.htmla plain example page
README.md package.json vite.config.js LICENSE.md

Use it in your project

Copy pocket.css and pocket.js into your project.
Add the markup from index.html (the block between the COMPONENT comments).
Say what to copy, then start it:

<button class="pocket" data-copy="npm i my-package">…</button>
<!-- or copy the text / value of another element -->
<button class="pocket" data-copy-target="#api-key">…</button>

import { init, initAll } from './pocket.js';
initAll();                                   // every .pocket on the page
init(el, { text: () => editor.getValue() }); // or pass the text in code

Questions

What exactly do I get?

The full source, a demo page and a README. No account, no framework.

Can I use it in client projects?

Yes, in unlimited projects. You can't resell or share the source itself.

Does it work in older browsers?

It uses the Clipboard API and falls back to the older copy command.

What if copying fails?

The button shakes and announces "Copy failed" to screen readers.

What if it doesn't work for me?

If it doesn't work like the demo, you get a refund within 14 days.

Still have a question? Email us. The person who made it answers.

More like Pocket

All buttons

index.html

<!-- the score lives on the
     root; CSS maps it to a
     level and a colour -->
<div class="steep"
  data-score="0">
  <span class="steep-liquid"
    aria-hidden="true">
<!-- strength is spoken,
     not just coloured -->
  <p class="steep-meter"
    … aria-live="polite">

steep.css

/* a score is only a level
   and a colour */
.steep[data-score="2"] {
  --steep-level: 52%; …
/* y1 above 1: the liquid
   overshoots, settles */
.steep-liquid { …
  height:
    var(--steep-level);
  transition: height 700ms
    cubic-bezier(.34, 1.3, …

steep.js

// JS writes the score;
// CSS does the rising
root.dataset.score =
  String(s);
// a new level sloshes the
// surface: stretch, squash
if (s !== last) { …
  wave.animate([ …
    { scale: '1 2.2' },
    { scale: '1 .7' }, …

Steep

$10

A password field that fills with liquid as the password gets stronger

2.8 KB0 depsForms

index.html

<!-- no pill in the markup:
     the script adds it
     behind the options -->
<div class="pinch"
  aria-label="View">
  <button
    class="pinch-option" …
    data-value="day"
    aria-checked="true">
<!-- radio roles, roving
     tabindex: from JS -->

pinch.css

/* isolate: z-index -1 puts
   the pill under the labels
   but above the glass */
.pinch { …
  isolation: isolate; …
.pinch-pill { …
  left: 0; …
  z-index: -1;
  /* set by JS per frame */
  will-change: transform,
    width;

pinch.js

// the edge in front gets
// the stiff spring, so the
// pill stretches, then the
// back edge catches up
const lead = movingRight
  ? R : L, trail = …
for (const [s, p] of …) {
  const a = -p.k * (s.x -
    s.target) - p.c * s.v;
  s.v += a * dt;
  s.x += s.v * dt;

Pinch

$12

A glass segmented control whose pill stretches like a drop of water

3.2 KB0 depsNavigation

index.html

<!-- aria-checked is the
     only state: CSS reads
     it, JS writes it -->
<button class="dew"
  type="button"
  aria-labelledby="l-wifi"
  aria-checked="true">
<!-- role="switch" is added
     by the script -->
  <span class="dew-knob">
  </span></button>

dew.css

/* typed, so it can
   transition: one number
   moves knob and colour */
@property --dew-p {
  syntax: "<number>"; …
.dew { …
  transition: --dew-p
    420ms var(--dew-spring);
…
.dew[aria-checked="true"]
  { --dew-p: 1; }

dew.js

// drag writes the number
// in; CSS springs the rest
const p = Math.max(0,
  Math.min(1, drag.p0 +
  dx / travel()));
root.style.setProperty(
  '--dew-p', p.toFixed(3));
// released past halfway
// wins; a tap just flips
set(moved ? p > 0.5
  : !isOn());

Dew

A switch whose knob turns into a drop of glass while you hold it

2.1 KB0 depsToggles

index.html

<!-- eyes before the head:
     they sink behind it -->
<g class="tuck-eye
  tuck-eye--back">
…
<path class="tuck-body" …/>
<!-- the engine finds the
     password by this -->
<input class="tuck-input
  tuck-input--secret" …
  data-mascot="secret" …>

tuck.css

/* hide: stalks shrink to
   their base, the eyes sink
   behind the head */
.tuck[data-mood="hide"]
  .tuck-stalk, …
{ transform: scaleY(0); …
.tuck[data-mood="hide"]
  .tuck-eye--front, …
{ transform:
  translate(4px, 54px); …

mascot.js

// the eyes chase the caret:
// width of the text before
// it, in the input's font
ctx.font = `${cs.fontWeight}
  ${cs.fontSize} …`;
…
// scrolled fields shift the
// text; clamp to the field
x: clamp(left + ctx
  .measureText(text).width
  - input.scrollLeft, …

Tuck

$29

Sign-up, sign-in and reset forms with a snail that pulls its eyes in while you type your password

10.6 KB0 depsForms

What it does

Use it in your project

Questions

More like Pocket

Steep

Pinch

Dew

Tuck

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Pocket

Steep

Pinch

Dew

Tuck