CopyButton

클릭 시 navigator.clipboard로 복사 + 아이콘이 copy → check로 모핑. 일정 시간 후 자동 복원, "Copied!" 툴팁 옵션.

라이브 미리보기

복사할 값

마지막 이벤트: —

코드 블록 + Copy

pnpm add @baneung-pack/ui

사용

import { CopyButton } from '@baneung-pack/ui';

// 기본
<CopyButton value="hello world">Copy</CopyButton>

// 아이콘만 + 툴팁
<CopyButton value={code} iconOnly />

// 콜백
<CopyButton
  value={url}
  onCopied={(v) => console.log('copied:', v)}
  onError={(e) => console.error('clipboard failed:', e)}
>
  링크 복사
</CopyButton>

// 코드 블록 우측 상단 패턴
<div className="relative">
  <pre>{code}</pre>
  <div className="absolute right-2 top-2">
    <CopyButton value={code} iconOnly size="sm" />
  </div>
</div>

API

CopyButtonProps

Property	Type	기본값	설명
value	string	—	복사할 텍스트 (필수).
onCopied	(value: string) => void	—	복사 완료 콜백.
onError	(error: unknown) => void	—	복사 실패 콜백 (clipboard 미지원/거부).
duration	number	1800	copied 상태 유지 시간 (ms).
size	'sm' \| 'md' \| 'lg'	'md'	크기.
showTooltip	boolean	true	iconOnly + copied 시 floating 툴팁.
tooltipLabel	string	'Copied!'	툴팁/copied 라벨.
iconOnly	boolean	false	true면 아이콘만 (정사각 버튼).
children	ReactNode	—	idle 상태 라벨 (iconOnly=false).
disabled	boolean	false	비활성화.