SmallButton

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

이 페이지의 목차

미리보기
언제 쓰는가
종류
크기
상태
사용 방법
속성(props)
치수와 토큰
접근성
잘한 예와 잘못한 예
함께 보는 컴포넌트

분류: 버튼
가져오기: import { SmallButton } from '@/ui/Button'
코드 위치: apps/mobile/src/ui/Button.tsx:79

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

primary (기본)

soft

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

SmallButton 종류
이름	설명
primary (기본)	`primary` 면, 흰 글자.
soft	`primarySoft` 면, `primary` 글자.

크기#

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

상태#

기본

누름

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

사용 방법#

승인·거절 한 쌍

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

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

속성(props)#

SmallButton 속성
이름	타입	기본값	필수	설명
`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 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

SmallButton 글자 색 대비
쓰임	글자색	바탕	대비	기준
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: 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
WellRow: 패널 안의 목록 한 줄이다. 옅은 홈(well)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.