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