← 목록으로
크기 변형 (Size Variants)
Extra Small:
Small:
Medium:
Large:
Extra Large:
스타일 변형 (Style Variants)
Primary:
Secondary:
Outline:
Ghost:
Destructive:
Link:
버튼 상태 (Button States)
Default:
Disabled:
Loading:
전체 매트릭스 (All Variants)
Primary:
Secondary:
Outline:
Ghost:
Destructive:
6. 버튼 시스템
Create a comprehensive button component system:
**Size Variants**:
- xs: 28px height, 12px padding-x, 12px font
- sm: 32px height, 14px padding-x, 13px font
- md: 40px height, 20px padding-x, 14px font
- lg: 48px height, 28px padding-x, 16px font
- xl: 56px height, 36px padding-x, 18px font
**Style Variants**:
- Primary: Brand color fill, white text
- Secondary: Gray-100 fill, gray-900 text
- Outline: 2px border, transparent fill
- Ghost: No border, hover background
- Destructive: Red-600 fill for dangerous actions
- Link: Underline style, inline display
**States** (for each variant):
- Default, Hover (+10% darker), Active (+15% darker)
- Focus: 2px ring offset-2 brand color
- Disabled: 50% opacity, cursor-not-allowed
- Loading: Spinner icon replacing text, maintain width
**Icon Support**:
- Leading icon: 8px gap before text
- Trailing icon: 8px gap after text
- Icon-only: Square aspect ratio
Tech: React + CVA (class-variance-authority) + Tailwind