← 목록으로
버튼 Variants 매트릭스
크기 × 스타일 매트릭스, 모든 상태 정의
크기 × 스타일 매트릭스
| Size / Style |
Primary |
Secondary |
Outline |
Ghost |
Destructive |
Link |
| xs (28px) |
|
|
|
|
|
|
| sm (32px) |
|
|
|
|
|
|
| md (40px) |
|
|
|
|
|
|
| lg (48px) |
|
|
|
|
|
|
| xl (56px) |
|
|
|
|
|
|
아이콘 지원
90. 버튼 Variants 매트릭스
Define complete button variant matrix:
**Size × Style Matrix**:
| | Primary | Secondary | Outline | Ghost | Destructive | Link |
|---------|---------|-----------|---------|-------|-------------|------|
| xs | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| sm | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| md | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| lg | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| xl | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
**Size Specifications**:
- xs: h-7 (28px), px-2.5, text-xs
- sm: h-8 (32px), px-3, text-sm
- md: h-10 (40px), px-4, text-sm
- lg: h-11 (44px), px-6, text-base
- xl: h-14 (56px), px-8, text-lg
**Style Specifications**:
**Primary**:
- bg: brand-600
- text: white
- hover: brand-700
- active: brand-800
**Secondary**:
- bg: gray-100
- text: gray-900
- hover: gray-200
- active: gray-300
**Outline**:
- bg: transparent
- border: gray-300
- text: gray-900
- hover: gray-50
**Ghost**:
- bg: transparent
- text: gray-600
- hover: gray-100
**Destructive**:
- bg: red-600
- text: white
- hover: red-700
**Link**:
- bg: transparent
- text: brand-600
- hover: underline
**States for All**:
- Default
- Hover
- Active/Pressed
- Focus (ring)
- Disabled (50% opacity)
- Loading (spinner)
**Icon Buttons**:
- icon-only variant
- Square aspect ratio
- Same sizes, center icon
**Full Width**:
- w-full modifier
- For CTAs in cards/forms
**Button Groups**:
- Connected buttons
- Border-radius: first/last only
- Divider between
Tech: CVA (class-variance-authority) + Tailwind