Action Button
가장 일반적으로 사용되는 버튼 컴포넌트입니다. 사용자의 주요 액션을 유도하거나, 폼 제출, 다이얼로그 확인 등에 사용합니다.
Figma 컴포넌트: Buttons/Button
Hierarchy
버튼의 중요도에 따라 5가지 Hierarchy를 제공합니다.
| Hierarchy | 용도 |
|---|---|
| Primary | 화면에서 가장 중요한 액션. 한 화면에 1개 권장 |
| Secondary | 브랜드 컬러 배경의 보조 액션 |
| Tertiary | 낮은 우선순위 액션 |
| Outline | 테두리가 있는 중립 톤 버튼. 보조적 액션에 사용 |
| Ghost | 배경 없는 최소 스타일 버튼. 인라인 또는 반복 액션에 사용 |
Size
4가지 사이즈를 지원합니다.
States
각 Hierarchy별로 5가지 상태를 가집니다.
Primary States
Secondary States
Tertiary States
Outline States
Ghost States
Icon Only
아이콘만 사용하는 버튼입니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | primary | secondary | tertiary | outline | ghost | primary | 버튼의 Hierarchy (시각적 중요도) |
size | sm | md | lg | xl | md | 버튼 크기 |
state | default | hover | focused | disabled | default | 버튼 상태 (문서 시각화용) |
disabled | boolean | false | 비활성화 여부 |
isLoading | boolean | false | 로딩 상태 |
iconOnly | boolean | false | 아이콘 전용 모드 |
leftIcon | ReactNode | - | 텍스트 왼쪽에 표시할 아이콘 |
rightIcon | ReactNode | - | 텍스트 오른쪽에 표시할 아이콘 |
children | ReactNode | - | 버튼 레이블 텍스트 |
Figma Variants
| Property | Values |
|---|---|
| Size | sm md lg xl |
| Hierarchy | Primary Secondary Tertiary Outline Ghost |
| State | Default Hover Focused Disabled Loading |
| Icon only | True False |