컴포넌트
Copy Button
클릭 시 텍스트를 클립보드에 복사하고, 체크 아이콘과 '복사됨' 라벨로 잠깐 전환되어 성공을 피드백하는 버튼. navigator.clipboard.writeText를 우선 사용하고 미지원/실패 시 execCommand 폴백으로 안전하게 처리한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CopyButton-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text | string | "https://vivid-kit.dev" | 클립보드에 복사할 텍스트 |
| label | string | "복사" | 기본(대기) 상태 라벨 |
| copiedLabel | string | "복사됨" | 복사 성공 후 표시할 라벨 |
| resetDelay | number | 1800 | 성공 상태 유지 시간(ms) |
| onCopy | (success: boolean, text: string) => void | undefined | 복사 결과 콜백 (성공 여부와 텍스트 전달) |
| ariaLabel | string | undefined | 접근성 라벨 (미지정 시 현재 상태 라벨 사용) |