Action

Button

클릭 액션을 수행하는 기본 버튼 컴포넌트입니다. 4가지 변형(Primary, Secondary, Outline, Ghost)과 2가지 크기(Medium, Large), 다양한 아이콘 배치를 지원합니다.

import { Button } from "@/shared/ui/common/action"

인터랙티브 데모

Variant

Size

Icon

disabled

tsx

<Button>
  Button
</Button>

4가지 스타일 변형입니다. variant 기본값은 "primary"입니다.

4가지 변형과 Default · Disabled · Icon 조합입니다.

Medium(28px)과 Large(44px) 비교입니다.

28px

44px

28×28

44×44

아이콘 배치 방식별 비교입니다.

disabled prop으로 모든 변형에서 비활성화 스타일을 적용합니다.

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 등)