CopyButton
Clipboard API 대체 동작과 접근 가능한 상태 알림을 제공하는 재사용 가능한 복사 동작이에요.
핵심 속성
컨트롤은 data-copy-status로 idle, copied, unavailable 상태를 알려요. 가장 최근 복사 시도만 반영하고, 결과는 기본적으로 2초 뒤 idle로 돌아가요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/copy-button.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRCopyButton } from '@tinyrack/ui/components/copy-button';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
상속된 Button 조합 고유 링크
`appearance`, `variant`, `uiSize`와 레이블을 Button 스타일 전반에서 조합할 수 있어요. 대기 및 성공 레이블은 같은 너비를 유지하고 더 긴 실패 레이블은 실패할 때만 보여요.
API
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | string | 필수 | Clipboard API 또는 화면 밖 선택 대체 동작으로 복사할 텍스트예요. |
idleLabel | string | "Copy" | 복사 전 표시 및 접근성 레이블이에요. |
copiedLabel | string | "Copied" | 성공 레이블과 polite 알림이에요. |
unavailableLabel | string | "Copy unavailable" | 두 복사 방식이 모두 실패했을 때의 레이블과 polite 알림이에요. |
onStatusChange | (status) => void | — | copied 또는 unavailable을 전달한 뒤 초기화할 때 idle을 전달해요. 오래됐거나 마운트 해제된 시도는 전달하지 않아요. |
resetDelay | number | 2000 | 완료 결과가 idle로 초기화되기까지의 밀리초예요. |
children을 제외한 모든 TRButton prop을 상속하므로 ref, 네이티브 이벤트, disabled, loading, loadingLabel, appearance, variant, uiSize를 사용할 수 있어요. onClick에서 preventDefault()를 호출하면 복사 시도를 취소해요.