컴포넌트
ButtonCornerBorders
4개 코너의 L자 브래킷이 호버/포커스 시 바깥으로 벌어지며 팔을 뻗어 버튼을 감싸듯 확장하는 버튼.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonCornerBorders-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "Explore" | 버튼에 표시할 텍스트. |
| accentColor | string | "#C084FC" | 코너 브래킷의 강조 색상(Vivid Kit 바이올렛 기본). |
| armLength | number | 14 | 평상시 코너 팔의 길이(px). 호버 시 확장 기준. |
| spread | number | 6 | 호버 시 브래킷이 바깥으로 벌어지는 거리(px). |
| thickness | number | 2 | 코너 팔(arm)의 두께(px). |
| duration | number | 320 | 확장/수축 전환 지속(ms). reduced-motion 시 0. |