# SmallButton

목록 행 안에 놓는 작은 사각형 버튼이다. "풀기", "승인", "거절" 같은 한 단어 행동에 쓴다.

- 분류: 버튼
- 가져오기: `import { SmallButton } from '@/ui/Button'`
- 코드 위치: `apps/mobile/src/ui/Button.tsx:79` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/small-button

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/small-button 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 목록 행 오른쪽에 놓는 짧은 행동에 쓴다. 글자는 두세 글자로 짧게 한다.
- 두 행동을 나란히 놓을 때는 중요한 쪽을 `primary`, 다른 쪽을 `soft`로 한다.

### 쓰지 않는다
- 화면의 주 행동에 쓰지 않는다. PrimaryButton을 쓴다.
- 긴 문장을 넣지 않는다. 폭이 글자에 맞춰 늘어나 행이 무너진다.

## 종류

| 이름 | 설명 |
| --- | --- |
| primary (기본) | `primary` 면, 흰 글자. |
| soft | `primarySoft` 면, `primary` 글자. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 높이 32, 최소 폭 48 | 크기를 바꾸는 속성이 없다. 누르는 영역은 `hitSlop` 10으로 사방 10씩 넓어진다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |
| 누름 | 투명도 0.8. |
| 비활성 | 비활성 표현이 없다. 누를 수 없는 행동은 렌더링하지 않는다. |

## 사용 방법

### 승인·거절 한 쌍

```tsx
import { SmallButton } from '@/ui/Button';

<View style={{ flexDirection: 'row', gap: space.sm }}>
  <SmallButton label="거절" tone="soft" onPress={decline} />
  <SmallButton label="승인" onPress={approve} />
</View>
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `label` | `string` | — | 필수 | 버튼에 쓰는 글자. |
| `onPress` | `() => void` | — | 선택 | 누르면 실행할 함수. |
| `tone` | `'primary' \| 'soft'` | `'primary'` | 선택 | `"primary"`(기본)는 주색 면, `"soft"`는 옅은 주색 면. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 높이 | 32 (최소 폭 48) |
| 모서리 | 10 |
| 좌우 안쪽 여백 | 12 |
| 글자 | smallStrong (13/19, SemiBold) |
| 누르는 영역 | hitSlop 사방 10 |

## 접근성

- 역할은 `button`이다.
- 보이는 높이는 32지만 `hitSlop` 덕분에 누르는 영역은 52×68 이상이 된다. 이웃한 버튼과 간격이 8 미만이면 영역이 겹치므로 8 이상 띄운다.
- 앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| primary 글자 (13px) | `onPrimary` | `primary` | 3.93:1 미달 | 3.31:1 미달 | 4.60:1 통과 | 7.25:1 통과 | 4.5:1 |
| soft 글자 (13px) | `primary` | `primarySoft` | 3.45:1 미달 | 4.32:1 미달 | 4.21:1 미달 | 4.68:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 행 오른쪽에 짧은 글자로 놓는다.
- 잘못한 예: 긴 문장을 넣으면 버튼이 길어져 행이 무너진다. 짧은 단어로 쓴다.

## 함께 보는 컴포넌트

- [PrimaryButton](https://developers.moring.co/tds/components/primary-button.md): 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.