Action Button

가장 일반적으로 사용되는 버튼 컴포넌트입니다. 사용자의 주요 액션을 유도하거나, 폼 제출, 다이얼로그 확인 등에 사용합니다.

Figma 컴포넌트: Buttons/Button

Hierarchy

버튼의 중요도에 따라 5가지 Hierarchy를 제공합니다.

Hierarchy	용도
Primary	화면에서 가장 중요한 액션. 솔리드 브랜드 컬러(`#7700ff`). 한 화면에 1개 권장
Secondary	Primary를 보조하는 액션. 연보라 배경(`#e6d4ff`) + 브랜드 텍스트(`#6a00e0`)
Tertiary	낮은 우선순위 액션. 아주 옅은 알파 배경(`rgba(0,0,0,0.03)`) + 회색 텍스트
Outline	연회색 배경(`#f3f4f6`) + 옅은 테두리. 표·카드 내부 액션에 적합
Ghost	기본 배경 없음. 툴바·메뉴 내부 액션에 적합

4가지 사이즈를 지원합니다.

각 Hierarchy별로 6가지 상태를 가집니다: Default Hover Active Focused Disabled Loading.

아이콘만 사용하는 정사각형 버튼입니다.

Prop	Type	Default	Description
`variant`	primary \| secondary \| tertiary \| outline \| ghost	`primary`	버튼의 Hierarchy (시각적 중요도)
`size`	sm \| md \| lg \| xl	`md`	버튼 크기
`state`	default \| hover \| active \| focused \| disabled	`default`	버튼 상태 (문서 시각화용)
`disabled`	boolean	`false`	비활성화 여부
`isLoading`	boolean	`false`	로딩 상태
`iconOnly`	boolean	`false`	아이콘 전용 모드
`leftIcon`	ReactNode	`-`	텍스트 왼쪽에 표시할 아이콘
`rightIcon`	ReactNode	`-`	텍스트 오른쪽에 표시할 아이콘
`children`	ReactNode	`-`	버튼 레이블 텍스트

Property	Values
Size	`sm` `md` `lg` `xl`
Hierarchy	`Primary` `Secondary` `Tertiary` `Outline` `Ghost`
State	`Default` `Hover` `Active` `Focused` `Disabled` `Loading`
Icon only	`True` `False`