컴포넌트
ButtonBorderDraw
호버/포커스 시 SVG 테두리가 한 획으로 그려지는 버튼으로, 실측 둘레 기반 stroke-dash 트랜지션을 사용한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonBorderDraw-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "테두리 그리기" | 버튼에 표시할 라벨 텍스트. |
| strokeWidth | number | 2 | 그려지는 테두리 선의 두께(px). |
| radius | number | 14 | 버튼과 테두리 모서리의 둥글기(px). |
| duration | number | 0.6 | 테두리가 완전히 그려지는 데 걸리는 시간(초). |
| onActivate | () => void | undefined | 클릭 또는 Enter/Space 활성화 시 호출되는 콜백. |
| ariaLabel | string | undefined | 스크린리더용 접근성 라벨(미지정 시 label 사용). |