Destructive Button
삭제, 해제, 초기화 등 되돌리기 어려운 위험한 액션에 사용하는 버튼입니다. 사용자에게 주의를 환기시키기 위해 빨간색 계열의 컬러를 사용합니다.
Figma 컴포넌트: Buttons/destructive
Hierarchy
| Hierarchy | 용도 |
|---|---|
| Primary | 가장 강한 경고. 삭제 확인 다이얼로그 등 |
| Secondary | 빨간 테두리로 위험을 표현. Primary보다 약한 강조 |
| Tertiary | 배경 없는 텍스트 스타일. 표/카드 내부 액션 |
| Ghost | 최소한의 시각적 무게. 툴바·메뉴 내부 액션 |
States
각 Hierarchy별로 6가지 상태를 가집니다: Default Hover Active Focused Disabled Loading.
Primary States
Secondary States
Tertiary States
Ghost States
Size
Action Button과 동일한 4가지 사이즈를 지원합니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | destructive-primary | destructive-secondary | destructive-tertiary | destructive-ghost | - | Destructive 버튼의 Hierarchy |
size | sm | md | lg | xl | md | 버튼 크기 |
state | default | hover | active | focused | disabled | default | 버튼 상태 (문서 시각화용) |
disabled | boolean | false | 비활성화 여부 |
isLoading | boolean | false | 로딩 상태 |
iconOnly | boolean | false | 아이콘 전용 모드 |
Figma Variants
| Property | Values |
|---|---|
| Size | sm md lg xl |
| Hierarchy | Primary Secondary Tertiary Ghost |
| State | Default Hover Active Focused Disabled Loading |
| Icon only | True False |