CircleButton
화살표가 들어 있는 둥근 주색 버튼이다. 온보딩에서 다음 단계로 넘어갈 때 쓴다.
- 분류
- 버튼
- 가져오기
import { CircleButton } from '@/ui/Button'- 코드 위치
apps/mobile/src/ui/Button.tsx:102
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 온보딩처럼 한 단계씩 넘어가는 화면의 "다음"에 쓴다.
쓰지 않는다
- 글자가 필요한 행동에 쓰지 않는다. 글자가 없어서 접근성 이름(
label)에만 의존한다. - 온보딩 밖에서 쓰지 않는다. 다른 화면에서는 PrimaryButton이 다음 행동을 맡는다.
종류#
종류가 없다. 화살표 아이콘 하나만 들어간다.
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 지름 56 | size로 바꿀 수 있다. 앱은 56만 쓴다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 기본 | 대각선(135°) 그라데이션, 그림자 shadow(2). |
| 누름 | 0.96배로 줄어든다. |
| 비활성 | 비활성 표현이 없다. |
사용 방법#
기본
기본
import { CircleButton } from '@/ui/Button';
<CircleButton onPress={() => router.push('/(onboarding)/fields')} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
onPress | () => void | — | 선택 | 누르면 실행할 함수. |
size | number | 56 | 선택 | 지름(px). 기본 56. |
label | string | '다음' | 선택 | 화면 읽기 프로그램이 읽는 이름. 기본 "다음". |
치수와 토큰#
- 지름
- 56
- 배경
- gradient, 대각선(왼쪽 위 → 오른쪽 아래)
- 그림자
- shadow(2)
- 아이콘
- ArrowRight 22px, 선 두께 2.4, white
접근성#
- 역할은
button이고 이름은label("다음")이다. 글자가 없으므로 이름을 반드시 둔다. - 앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 아이콘 (22px) | onPrimaryStrong | gradient (양 끝 중 낮은 값) | 3.08:1 통과3.08:1 통과4.60:1 통과5.48:1 통과 | 3:1 (큰 글자) |
잘한 예와 잘못한 예#
label)을 화면의 행동에 맞춰 "다음 단계"처럼 구체적으로 쓴다.함께 보는 컴포넌트#
- PrimaryButton: 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
- PageDots: 지금이 몇 번째 단계인지 알려 주는 작은 점 줄이다. 온보딩 단계 표시에 쓴다.