컴포넌트
Split Button
좌측 기본 액션 버튼과 우측 화살표 토글이 하나의 pill을 이루는 스플릿 버튼. 토글 클릭 시 보조 액션 메뉴가 CSS 스태거 페이드로 순차 등장하며, 외부 클릭·ESC 닫기와 방향키(ArrowUp/Down·Home/End) 항목 이동을 지원한다. WAI-ARIA menu/menuitem 패턴(aria-haspopup/expanded/controls), 비활성 항목 자동 건너뜀, reduced-motion 대응, pointerdown 리스너 cleanup까지 포함한 독자 구현.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SplitButton-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "저장하기" | 좌측 기본 액션 버튼에 표시할 텍스트. |
| icon | string | undefined | 기본 액션 버튼 앞에 표시할 아이콘(이모지 등). 선택 사항. |
| onPrimary | () => void | undefined | 기본 액션 버튼 클릭 시 실행되는 콜백. |
| actions | SplitButtonAction[] | DEFAULT_ACTIONS (5개) | 드롭다운으로 펼칠 보조 액션 목록. 미지정 시 기본 데이터 사용. |
| onAction | (action: SplitButtonAction, index: number) => void | undefined | 보조 액션 선택 시 실행되는 콜백(항목, 인덱스 전달). |
| placement | "bottom" | "top" | "bottom" | 드롭다운 열림 방향. bottom=아래로, top=위로. |
| stagger | number | 40 | 항목 간 스태거 지연(ms). 순차 페이드 간격. |
| duration | number | 200 | 개별 항목 페이드 전환 지속(ms). |
| accentColor | string | "#C084FC" | 강조 색상(기본 버튼 배경/호버/포커스). 기본값은 Vivid Kit 바이올렛. |
| disabled | boolean | false | true면 기본 및 보조 액션 모두 비활성화. |
| className | string | undefined | 루트 컨테이너에 적용할 추가 클래스. |