CopyButton
클립보드 복사 버튼 — 포털 Copy 패턴 v1 승격. 복사 성공 시 체크 아이콘 2초 전환, 실패는 오류 상태로 가시화합니다.
마지막 업데이트 2026-06-11
한눈에#
클립보드 복사 버튼 — 복사 성공 시 체크 아이콘으로 2초 전환, 실패는 오류 상태로 가시화합니다.
- idle · copied · error
- 32px 정사각
- 히트 44px
- role=status 공지
클릭해 보세요 — CopyIcon → CheckIcon 2초 전환
플레이그라운드#
컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.
import { CopyButton } from '@wds/ui-web';
<CopyButton value="npm install @wds/ui-web" />변형#
기본 라벨은 한국어(복사/복사됨/복사 실패)이며 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#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | string | — | 클립보드에 복사할 문자열 (필수) |
copyLabel | string | '복사' | 버튼 aria-label |
copiedLabel | string | '복사됨' | 성공 시 aria-live 공지 텍스트 |
errorLabel | string | '복사 실패' | 실패 시 aria-live 공지 텍스트 |
…rest | Omit<ButtonHTMLAttributes, 'children'> | — | disabled · onClick(복사와 체이닝) 등은 button으로 전달 |
접근성#
- 아이콘 전용 버튼 — 접근성 이름은
copyLabel(aria-label) - 상태 변화는 시각적으로 숨긴
role="status"+aria-live="polite"텍스트로 스크린리더에 공지됩니다 - 성공/실패는 색 + 아이콘 병행(Check/AlertTriangle)이라 색맹 환경에서도 구분됩니다
- Clipboard API는 시큐어 컨텍스트(HTTPS/localhost) 전용 — 부재 시 오류 상태로 표시됩니다
토큰#
component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).
| 속성 | 토큰 |
|---|---|
| 기본 잉크 | color.text-subtle → hover color.text |
| hover/active 배경 | color.surface-hover / color.surface-pressed |
| 복사됨 | color.success-text |
| 실패 | color.error-text |
| 포커스 링 | color.focus-ring 2px 아웃라인 |
| 라디우스 | radius.control-sm |