본문으로 건너뛰기
TDSMoring 디자인 시스템

SecondaryButton

테두리만 있거나 옅은 주색으로 채운 알약 모양 버튼이다. PrimaryButton 옆의 두 번째 행동에 쓴다.

이 페이지의 목차
분류
버튼
가져오기
import { SecondaryButton } from '@/ui/Button'
코드 위치
apps/mobile/src/ui/Button.tsx:50

미리보기#

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

outline (기본)
soft
아이콘과 함께

언제 쓰는가#

쓴다

  • 같은 화면에 PrimaryButton이 이미 있을 때, 그다음으로 중요한 행동에 쓴다. 예: "이전", "시험지 PDF 받기".
  • 화면 어디에도 PrimaryButton이 필요 없을 만큼 가벼운 행동에 쓴다. 예: "다시 확인하기".
  • tone="outline"은 흰 면 위에, tone="soft"는 눈에 덜 띄게 하고 싶을 때 쓴다.

쓰지 않는다

  • 화면의 가장 중요한 행동에 쓰지 않는다. 그 자리는 PrimaryButton이다.
  • 한 줄에 세 개 이상 나란히 놓지 않는다. 둘까지만 나란히 놓는다.
  • 목록 행 안에 쓰지 않는다. SmallButton을 쓴다.

종류#

SecondaryButton 종류
이름설명
outline (기본)흰 면(surface), 1.2px 테두리(primaryLine), 글자 primary.
soft옅은 주색 면(primarySoft), 테두리 없음, 글자 primary.

크기#

SecondaryButton 크기
이름값설명
기본높이 48height를 생략하면 48이다.
큰 버튼높이 50, 52, 54하단 영역에서 PrimaryButton과 높이를 맞출 때 쓴다.
작은 버튼높이 36앱에서는 운영 도구 화면 한 곳에서만 쓴다. 새 화면에서는 쓰지 않는다.

상태#

기본
누름
비활성
SecondaryButton 상태
상태모습과 동작
기본outline은 흰 면과 테두리, soft는 옅은 주색 면.
누름투명도 0.8.
비활성투명도 0.45. 눌러도 반응하지 않는다.

사용 방법#

기본

기본
import { SecondaryButton } from '@/ui/Button';

<SecondaryButton label="이전" onPress={prev} />

옅은 면과 아이콘

옅은 면과 아이콘
<SecondaryButton
  label="약점 개념 풀기"
  tone="soft"
  icon={<Target size={18} color={color.primary} strokeWidth={2.2} />}
  onPress={practiceWeak}
/>

이전·다음을 나란히

이전·다음을 나란히
<View style={{ flexDirection: 'row', gap: space.sm }}>
  <SecondaryButton label="이전" height={52} disabled={index === 0} onPress={prev} style={{ flex: 1 }} />
  <PrimaryButton label="다음" arrow={false} height={52} onPress={next} style={{ flex: 2 }} />
</View>

속성(props)#

SecondaryButton 속성
이름타입기본값필수설명
labelstring—필수버튼에 쓰는 글자. 한 줄, 길면 80%까지 줄인다.
onPress() => void—선택누르면 실행할 함수.
disabledboolean—선택true이면 투명도 0.45로 바꾸고 누를 수 없게 한다.
busyboolean—선택이 컴포넌트는 받지만 쓰지 않는다. 처리 중 표시가 필요하면 PrimaryButton을 쓴다.
arrowboolean—선택이 컴포넌트는 받지만 쓰지 않는다. 화살표를 그리지 않는다.
iconReactNode—선택글자 앞에 놓을 아이콘. 색은 직접 color.primary로 지정한다.
styleStyleProp<ViewStyle>—선택바깥 여백이나 배치만 바꾸는 React Native 스타일이다. 색, 높이, 모서리는 바꾸지 않는다.
heightnumber48선택버튼 높이(px). 기본 48.
accessibilityHintstring—선택화면 읽기 프로그램이 읽어 주는 설명.
tone'outline' | 'soft''outline'선택"outline"(기본)은 테두리, "soft"는 옅은 주색 면.

치수와 토큰#

높이
48 (기본)
모서리
pill(999)
좌우 안쪽 여백
20
글자
button (15/20, Bold), 색 primary
outline 면과 테두리
surface 면, 1.2px primaryLine
soft 면
primarySoft

접근성#

  • 역할은 button이다. 접근성 상태에 disabled가 들어간다.
  • 높이 48 이상이라 눌러야 하는 영역의 최소 크기를 넘는다. 높이 36 버튼은 최소 크기에 못 미치므로 새 화면에서는 쓰지 않는다.
  • 앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

글자 색 대비

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

SecondaryButton 글자 색 대비
쓰임글자색바탕대비기준
outline 글자 (15px 굵게)primarysurface3.93:1 미달5.26:1 통과4.50:1 통과7.17:1 통과4.5:1 (작은 글자)
soft 글자 (15px 굵게)primaryprimarySoft3.45:1 미달4.32:1 미달4.21:1 미달4.68:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

잘한 예나란히 놓을 때 PrimaryButton이 더 넓고, SecondaryButton은 보조 행동이라는 것이 보인다.
잘못한 예두 버튼의 무게가 같으면 어느 쪽이 중요한지 알 수 없다. 한쪽은 PrimaryButton으로 한다.
  • PrimaryButton: 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
  • TextButton: 글자만 있는 가장 가벼운 버튼이다. "나중에", "건너뛰기" 같은 선택 행동에 쓴다.
  • SmallButton: 목록 행 안에 놓는 작은 사각형 버튼이다. "풀기", "승인", "거절" 같은 한 단어 행동에 쓴다.