TextButton
글자만 있는 가장 가벼운 버튼이다. "나중에", "건너뛰기" 같은 선택 행동에 쓴다.
- 분류
- 버튼
- 가져오기
import { TextButton } from '@/ui/Button'- 코드 위치
apps/mobile/src/ui/Button.tsx:93
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- PrimaryButton 아래에 놓는 "나중에", "취소", "건너뛰기"에 쓴다.
- 패널 안의 "학습 카드 공유" 같은 보조 링크에 쓴다.
쓰지 않는다
- 화면의 유일한 행동에 쓰지 않는다. 버튼으로 보이지 않아 눌러야 한다는 것을 알기 어렵다.
- 문장 안에 끼워 넣지 않는다. 문장 속 링크는 별도 컴포넌트가 없다.
종류#
| 이름 | 설명 |
|---|---|
| 주색 (기본) | 글자가 primary다. |
| 보조색 | tone에 color.textSecondary를 넘긴다. "나중에", "건너뛰기"처럼 하지 않아도 되는 행동에 쓴다. 앱에서는 이 모양이 더 많다. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 글자 13, 위아래 여백 6 | 크기를 바꾸는 속성이 없다. 누르는 영역은 hitSlop 10으로 넓어진다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 기본 | 기본 모습이다. |
| 누름 | 투명도 0.6. |
| 비활성 | 비활성 표현이 없다. |
사용 방법#
기본
기본
import { TextButton } from '@/ui/Button';
<TextButton label="학습 카드 공유" onPress={share} />보조색
보조색
<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 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 주색 글자 (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: 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
- SecondaryButton: 테두리만 있거나 옅은 주색으로 채운 알약 모양 버튼이다. PrimaryButton 옆의 두 번째 행동에 쓴다.