ActionButtons
items prop으로 버튼을 선언적으로 렌더링하고, 공간이 부족하면 자동으로 dropdown으로 이동하는 컴포넌트
개요
ActionButtons는 여러 액션 버튼을 일렬로 배치하면서, 컨테이너 공간이 부족해지면 넘치는 버튼을 자동으로 “더보기(⋯)” 드롭다운 메뉴로 이동시킵니다. 특정 버튼을 항상 드롭다운에 고정 배치하는 것도 가능합니다.
주요 특징
- ✅ 선언적 렌더링: items 배열로 버튼 목록을 선언적으로 정의
- ✅ 자동 Overflow 감지: ResizeObserver 기반으로 컨테이너 크기 변경 시 자동 재계산
- ✅ 고정 Dropdown 아이템:
alwaysInDropdown으로 특정 아이템을 항상 드롭다운에 배치 - ✅ 유연한 커스터마이징: 개별 아이템별 variant, size, icon 설정
- ✅ 디자인 토큰: Button, DropdownMenu의 디자인 토큰 상속
기본 사용
items 배열로 버튼을 렌더링합니다.
Preview
Overflow 동작
컨테이너 너비를 초과하면 넘치는 버튼이 자동으로 ⋯ 드롭다운 메뉴로 이동합니다. 브라우저 창 크기를 조절해보세요.
Preview
고정 Dropdown 아이템 (alwaysInDropdown)
alwaysInDropdown: true로 설정된 아이템은 공간과 무관하게 항상 드롭다운에 표시됩니다. overflow로 밀린 아이템과는 separator로 구분됩니다.
Preview
Sizes
size prop으로 전체 버튼 크기를 조절합니다.
Preview
xs
sm (기본)
md
lg
Variant 옵션
variant prop으로 전체 기본 버튼 스타일을 지정합니다. 개별 아이템의 variant가 우선합니다.
Preview
outline (기본)
ghost
secondary
Overflow 비활성화
overflow={false}로 overflow 감지를 비활성화합니다. 모든 버튼이 항상 표시됩니다.
Preview
API Reference
ActionButtonsProps
| Prop | Type | Default | Description |
|---|---|---|---|
items | ActionButtonItem[] | [] | 버튼 아이템 목록 |
size | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | 기본 버튼 크기 |
variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "tertiary" | "outline" | 기본 버튼 스타일 |
overflow | boolean | true | overflow 감지 활성화 |
gap | number | 8 | 버튼 간 간격 (px) |
className | string | - | 컨테이너 CSS 클래스 |
moreButtonVariant | ButtonProps["variant"] | "ghost" | 더보기 버튼 variant |
moreButtonSize | ButtonProps["size"] | - | 더보기 버튼 size (미지정 시 size에 맞는 icon size 자동 적용) |
ActionButtonItem
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | 필수 | 고유 식별자 |
label | string | 필수 | 버튼 레이블 |
icon | ReactNode | - | 버튼 아이콘 |
variant | ButtonProps["variant"] | - | 개별 버튼 variant (미지정 시 ActionButtons의 variant 사용) |
size | ButtonProps["size"] | - | 개별 버튼 size (미지정 시 ActionButtons의 size 사용) |
disabled | boolean | false | 비활성화 여부 |
alwaysInDropdown | boolean | false | true이면 항상 dropdown에 표시 |
Events
| Event | Type | Description |
|---|---|---|
onClick | () => void | 버튼 또는 dropdown 아이템 클릭 시 호출 (ActionButtonItem에 정의) |
기본 사용법
import { ActionButtons, type ActionButtonItem } from "@vortex/ui-foundation"
import { Plus, Edit, Trash2 } from "lucide-react"
const items: ActionButtonItem[] = [
{ id: "create", label: "생성", icon: <Plus />, variant: "default", onClick: () => {} },
{ id: "edit", label: "수정", icon: <Edit />, onClick: () => {} },
{ id: "delete", label: "삭제", icon: <Trash2 />, alwaysInDropdown: true },
]
<ActionButtons items={items} />접근성
권장 사항
- ✅ 각 버튼 아이템에 명확한
label을 제공하세요 - ✅ 아이콘만으로 의미 전달이 부족하면 텍스트 label을 함께 사용하세요
- ✅ dropdown 메뉴는 키보드(Enter, Space, Arrow)로 탐색 가능합니다
- ❌
label없이icon만 사용하는 것은 지양하세요
관련 컴포넌트
- Button: 개별 버튼 컴포넌트
- ButtonGroup: 버튼 그룹 (overflow 미지원)
- DropdownMenu: 드롭다운 메뉴
Last updated on