Copy button component

Example

Full

copy-button.html

<div class="flex items-center gap-2">
  <button class="copy-btn" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy</button>
  <button class="copy-btn copy-btn-done" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Copied</button>
  <button class="copy-btn" type="button" aria-label="Copy link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
</div>

Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Base	Base class of the copy button. On a <button> in the example. Sets inline-flex display, alignment, gap, height, padding and border. CSS `.copy-btn:where(:hover) { background-color: var(--surface-2); color: var(--foreground); } .copy-btn:focus-visible { outline: var(--m-ring); outline-offset: var(--m-ring-offset); }`
	Modifier	Modifier, combined with the copy-btn class. On a <button> in the example. Sets border, background and text color. CSS `@supports not (color: oklch(from red l c h)) { .copy-btn-done { color: var(--success); } } .copy-btn-done { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); background-color: color-mix(in oklab, var(--success) 10%, var(--surface)); color: oklch(from var(--success) calc(min(l, 0.48) * (1 - var(--mode)) + max(l, 0.8) * var(--mode)) c h); }`

Base

Base class of the copy button. On a <button> in the example. Sets inline-flex display, alignment, gap, height, padding and border.

CSS

.copy-btn:where(:hover) {
  background-color: var(--surface-2);
  color: var(--foreground);
}

.copy-btn:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

Modifier

Modifier, combined with the copy-btn class. On a <button> in the example. Sets border, background and text color.

CSS

@supports not (color: oklch(from red l c h)) {
  .copy-btn-done {
    color: var(--success);
  }
}

.copy-btn-done {
  border-color: color-mix(in oklab, var(--success) 45%, var(--border));
  background-color: color-mix(in oklab, var(--success) 10%, var(--surface));
  color: oklch(from var(--success) calc(min(l, 0.48) * (1 - var(--mode)) + max(l, 0.8) * var(--mode)) c h);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Copy button: start from the base class, then add modifiers -->
<div class="flex items-center gap-2">
  <button class="copy-btn" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy</button>
  <button class="copy-btn copy-btn-done" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Copied</button>
  <button class="copy-btn" type="button" aria-label="Copy link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components