Action
Button
클릭 액션을 수행하는 기본 버튼 컴포넌트입니다. 4가지 변형(Primary, Secondary, Outline, Ghost)과 2가지 크기(Medium, Large), 다양한 아이콘 배치를 지원합니다.
import { Button } from "@/shared/ui/action"인터랙티브 데모
Variants × States
4가지 변형과 3가지 상태(Default, Hover, Disabled)의 조합입니다.
| Variant | Default | Disabled | Icon Before | Icon After | Icon Only |
|---|---|---|---|---|---|
| Primary | |||||
| Secondary | |||||
| Outline | |||||
| Ghost |
Size Comparison
Medium(28px)과 Large(44px)의 비교입니다.
28px
44px
28 × 28
44 × 44
Icon Layouts
아이콘 배치 방식별 비교입니다.
Text Only
Icon Before
Icon After
Icon Only
Both Icons
Props
Button
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "ghost" | — | "primary" | 버튼 스타일 변형 |
size | "medium" | "large" | — | "medium" | 버튼 크기 (Medium 28px / Large 44px) |
leftIcon | ComponentType<{ className?: string }> | — | — | 텍스트 앞에 표시할 아이콘 컴포넌트 |
rightIcon | ComponentType<{ className?: string }> | — | — | 텍스트 뒤에 표시할 아이콘 컴포넌트 |
disabled | boolean | — | false | 비활성화 상태 |
children | ReactNode | — | — | 버튼 텍스트. 생략하면 아이콘 전용 버튼이 됩니다. |
className | string | — | — | 추가 CSS 클래스 |
* ButtonHTMLAttributes의 모든 네이티브 속성을 상속합니다. (onClick, type, form 등)