CopyButton

molecules

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

ARIA Role: button

Demo

Props

PropTypeRequiredDefaultDescription
valuestringYes—String to copy

TypeScript Interface

interface CopyButtonProps {
  value: string;
  ariaLabel?: string;
  size?: 'sm' | 'md';
  variant?: 'icon' | 'text';
}

Assertions (NASA Rule 5)

  • [type]value must be a string (NASA Rule 5)(NASA Rule 5)
  • [aria]aria-live='polite' announcement on copy; fallback to selection API if clipboard blocked(WCAG 4.1.3)

Usage

Import

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

Basic

<Copybutton />

With Variants

<Copybutton variant="primary" size="md" />