CopyButton

한눈에#

클립보드 복사 버튼 — 복사 성공 시 체크 아이콘으로 2초 전환, 실패는 오류 상태로 가시화합니다.

• idle · copied · error
• 32px 정사각
• 히트 44px
• role=status 공지

클릭해 보세요 — CopyIcon → CheckIcon 2초 전환

사용 시점#

• 이럴 때: 토큰 값·코드 스니펫·ID처럼 사용자가 그대로 복사해 쓸 짧은 값 옆에 둘 때 — 한 번의 클릭으로 복사하고 결과(복사됨/실패)를 가시화합니다.
• 값 옆에 붙이기: 복사 대상 값과 같은 줄·인접 위치에 두어 무엇을 복사하는지 분명히 합니다.
• 대신 Button: 복사가 아닌 일반 행동(저장·전송 등)은 Button을 씁니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

CopyButton를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

변형#

기본 라벨은 한국어(복사/복사됨/복사 실패)이며 copyLabel · copiedLabel · errorLabel로 문맥에 맞게 바꿉니다.

크기#

단일 크기입니다 — 시각 32px 정사각 버튼, 히트 영역은 ::after로 44px까지 확장되어 터치 타깃을 보장합니다.

상태#

• Idle — CopyIcon, text-subtle 잉크
• Copied — CheckIcon + success-text 잉크, 2초 후 idle 복귀
• Error — Clipboard API 부재/거부 시 AlertTriangleIcon + error-text 잉크로 가시화(silent fail 금지), 동일하게 2초 후 복귀
• 상태 아이콘 등장 모션은 opacity/transform만 사용하며 prefers-reduced-motion을 존중합니다

Props#

접근성#

• 아이콘 전용 버튼 — 접근성 이름은 copyLabel(aria-label)
• 상태 변화는 시각적으로 숨긴 role="status" + aria-live="polite" 텍스트로 스크린리더에 공지됩니다
• 성공/실패는 색 + 아이콘 병행(Check/AlertTriangle)이라 색맹 환경에서도 구분됩니다
• Clipboard API는 시큐어 컨텍스트(HTTPS/localhost) 전용 — 부재 시 오류 상태로 표시됩니다

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).