CopyButton

Implemented

Button that copies a value to clipboard and shows a brief checkmark + 'Copied' feedback. Uses navigator.clipboard API.

Categorymolecules

Sourcepatterns/molecules/copybutton.html

AI HintOne-click clipboard copy for token URLs, codes and invite links — prefer it over hand-rolled navigator.clipboard. i18n via copyLabel/copiedLabel/copiedFeedback; clipboard failures are currently swallowed silently.

Bouton qui copie une valeur dans le presse-papiers et affiche une coche + le message « Copié » pendant 2s. Utilise navigator.clipboard.

CopyButton

Input molecule (Family 5 — Tier 1)

Button that copies a value to clipboard and shows a brief checkmark + 'Copied' feedback. Uses navigator.clipboard API.

This component supports light and dark mode.

Usage

import { CopyButton } from '@epasslive/design-system'

// Icon variant (default)
<CopyButton value={ticket.passKitDownloadUrl} ariaLabel="Copy link" />

// Text variant with i18n labels
<CopyButton
  value={ticket.passKitDownloadUrl}
  variant="text"
  copyLabel="Copier le lien"
  copiedLabel="Copié"
  copiedFeedback="Lien copié dans le presse-papiers"
/>

When to use

Copy ticket wallet URL to share with attendees.
Copy invite link for promoter codes.
Copy order confirmation ID on receipt page.

Accessibility

The button uses aria-live="polite" and swaps between a Copy and a Check icon on activation. In the text variant, the visible label change ("Copier" → "Copié") is announced automatically. In the icon variant, pass copiedFeedback to provide an sr-only announcement (e.g. "Lien copié") — without it, the icon swap is silent to screen readers because both icons are aria-hidden.

The clipboard write is wrapped in a try/catch — if the API is unavailable (insecure context, old browser) the button still renders but the copy is a no-op. No fallback to the selection API is implemented.

Props

Prop

Type

Default

Description

value*

string

—

The string to copy to clipboard.

ariaLabel

string

—

Accessible name — defaults to copyLabel, then 'Copy'.

copyLabel

string

—

i18n label for the copy state; also the aria-label fallback.

copiedLabel

string

'Copied'

i18n label shown in text variant after copying.

copiedFeedback

string

—

Extra sr-only feedback announced after copying (e.g. « Lien copié dans le presse-papiers »).

size

'sm' | 'md'

'md'

Visual size preset.

variant

'icon' | 'text'

'icon'

Visual variant — icon shows only the clipboard/check glyph; text adds a visible label.

className

string

—

Additional CSS classes appended to the root button.

Props

Preview

CopyButton

Prop

Type

Required

Default

Description

value

string

Required

—

String to copy

ariaLabel

string

Optional

copyLabel, then 'Copy'

Accessible name — defaults to copyLabel, then 'Copy'.

copyLabel

string

Optional

—

i18n label for the copy state (§126 Wave 3 #5). Also the aria-label fallback.

copiedLabel

string

Optional

'Copied'

i18n label shown in text variant after copying.

copiedFeedback

string

Optional

—

Extra sr-only feedback announced after copying (aria-live=polite).

size

"sm" | "md"

Optional

'md'

Visual size preset.

variant

"icon" | "text"

Optional

'icon'

Visual variant.

className

string

Optional

—

Additional CSS classes on the button.

Quick use:<CopyButton />

Accessibility

ARIA rolebutton

Usage

Import

tsxSnippet

import { CopyButton } from "@epasslive/design-system"

Example 1

tsxSnippet

<CopyButton value={ticketUrl} ariaLabel="Copy ticket link" />

Example 2

tsxSnippet

<CopyButton value={promoCode} variant="text" copyLabel="Copier" copiedLabel="Copié" copiedFeedback="Code copié dans le presse-papiers" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules