# TextButton

글자만 있는 가장 가벼운 버튼이다. "나중에", "건너뛰기" 같은 선택 행동에 쓴다.

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

## 미리보기

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

## 언제 쓰는가

### 쓴다
- PrimaryButton 아래에 놓는 "나중에", "취소", "건너뛰기"에 쓴다.
- 패널 안의 "학습 카드 공유" 같은 보조 링크에 쓴다.

### 쓰지 않는다
- 화면의 유일한 행동에 쓰지 않는다. 버튼으로 보이지 않아 눌러야 한다는 것을 알기 어렵다.
- 문장 안에 끼워 넣지 않는다. 문장 속 링크는 별도 컴포넌트가 없다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 주색 (기본) | 글자가 `primary`다. |
| 보조색 | `tone`에 `color.textSecondary`를 넘긴다. "나중에", "건너뛰기"처럼 하지 않아도 되는 행동에 쓴다. 앱에서는 이 모양이 더 많다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 글자 13, 위아래 여백 6 | 크기를 바꾸는 속성이 없다. 누르는 영역은 `hitSlop` 10으로 넓어진다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |
| 누름 | 투명도 0.6. |
| 비활성 | 비활성 표현이 없다. |

## 사용 방법

### 기본

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

<TextButton label="학습 카드 공유" onPress={share} />
```

### 보조색

```tsx
<TextButton label="나중에" tone={color.textSecondary} onPress={skip} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `label` | `string` | — | 필수 | 버튼에 쓰는 글자. |
| `onPress` | `() => void` | — | 선택 | 누르면 실행할 함수. |
| `tone` | `string` | `color.primary` | 선택 | 글자 색. 기본은 `color.primary`. 보조 행동에는 `color.textSecondary`를 넘긴다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 글자 | smallStrong (13/19, SemiBold) |
| 위아래 여백 | 6 |
| 누르는 영역 | hitSlop 사방 10 |

## 접근성

- 역할은 `button`이다.
- `textSecondary` 색 글자는 흰 면에서 대비가 4.5:1에 못 미친다. 웹에서는 `textSecondaryInk`를 쓴다.
- 앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 주색 글자 (13px) | `primary` | `surface` | 3.93:1 미달 | 5.26:1 통과 | 4.50:1 통과 | 7.17:1 통과 | 4.5:1 |
| 보조색 글자 (13px) | `textSecondary` | `surface` | 4.23:1 미달 | 6.95:1 통과 | 4.88:1 통과 | 7.11:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 주 행동 아래에 낮은 무게로 놓는다.
- 잘못한 예: 화면에 이 버튼만 있으면 버튼처럼 보이지 않아 사용자가 지나친다.

## 함께 보는 컴포넌트

- [PrimaryButton](https://developers.moring.co/tds/components/primary-button.md): 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
- [SecondaryButton](https://developers.moring.co/tds/components/secondary-button.md): 테두리만 있거나 옅은 주색으로 채운 알약 모양 버튼이다. PrimaryButton 옆의 두 번째 행동에 쓴다.