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

AmberButton

주의 색(amber)으로 채운 알약 모양 버튼이다. "복습 추천" 카드의 행동에만 쓴다.

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

미리보기#

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

기본

언제 쓰는가#

쓴다

  • AmberSoft 면 위에 놓는 "복습 추천" 같은 추천 카드의 행동 하나에 쓴다.

쓰지 않는다

  • 일반 행동에 쓰지 않는다. 일반 행동은 PrimaryButton이다.
  • 경고나 오류를 알리는 데 쓰지 않는다. 오류는 danger, 안내는 Notice를 쓴다.
  • 흰 글자 대비가 낮으므로(아래 표) 새 화면에서 글자가 작아지는 곳에는 쓰지 않는다.

종류#

종류가 없다. 모양이 하나다.

크기#

AmberButton 크기
이름값설명
기본높이 46height를 생략하면 46이다.

상태#

기본
누름
AmberButton 상태
상태모습과 동작
기본amber 면, 흰 글자.
누름투명도 0.85.
비활성비활성 표현이 없다. 처리 중에는 글자를 "준비 중…"으로 바꾸고 onPress를 막는다.

사용 방법#

기본

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

<AmberButton label="지금 복습하기" onPress={startReview} />

속성(props)#

AmberButton 속성
이름타입기본값필수설명
labelstring—필수버튼에 쓰는 글자.
onPress() => void—선택누르면 실행할 함수.
disabledboolean—선택이 컴포넌트는 받지만 쓰지 않는다.
busyboolean—선택이 컴포넌트는 받지만 쓰지 않는다.
arrowboolean—선택이 컴포넌트는 받지만 쓰지 않는다.
iconReactNode—선택이 컴포넌트는 받지만 쓰지 않는다.
styleStyleProp<ViewStyle>—선택바깥 여백이나 배치만 바꾸는 React Native 스타일이다. 색, 높이, 모서리는 바꾸지 않는다.
heightnumber46선택버튼 높이(px). 기본 46.
accessibilityHintstring—선택이 컴포넌트는 받지만 쓰지 않는다.

치수와 토큰#

높이
46
모서리
pill(999)
글자
button (15/20, Bold), 색 white
배경
amber

접근성#

  • 역할은 button이다.
  • 흰 글자와 amber 면의 대비가 낮다. 아래 표에서 서비스별 값을 확인한다. 새로 만드는 웹 화면에서는 글자를 text 색으로 바꿔 대비를 맞춘다.
  • 앱은 터치 화면이라 마우스 올림(hover)과 키보드 포커스 표시가 없다. 웹에서 같은 모양을 만들 때는 포커스 링(2.5px 실선, 바깥쪽 3px 띄움)을 직접 그린다. 이 문서의 미리보기에는 포커스 링이 그려져 있다.

글자 색 대비

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

AmberButton 글자 색 대비
쓰임글자색바탕대비기준
버튼 글자 (15px 굵게)whiteamber2.02:1 미달2.02:1 미달2.25:1 미달1.82:1 미달4.5:1 (작은 글자)

잘한 예와 잘못한 예#

잘한 예추천 카드 안에서 행동이 하나일 때만 쓴다.
잘못한 예일반 저장 행동에 쓰지 않는다. 색이 "주의"를 뜻하기 때문이다.
  • PrimaryButton: 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
  • Notice: 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.