버튼

A. 콘텐츠

버튼에는 아이콘이나 텍스트용으로 예약된 단일 슬롯이 있습니다. 버튼이 실행하는 작업과 관련된 아이콘을 선택합니다. 아이콘이 관련 작업을 설명할 수 없는 경우 최대 3자(영문 기준)의 텍스트를 사용할 수 있습니다. 아이콘이 작업을 명확하게 설명할 수 없는 경우 칩 구성요소를 사용하는 것이 좋습니다.

B. 컨테이너

버튼 컨테이너는 단일 단색 채우기로 제한됩니다.

전환 버튼

전환 버튼을 사용하면 사용자가 두 상태 간에 전환할 수 있습니다.

압축 버튼

좁은 버튼은 더 작게 보이지만 탭할 수 있는 영역이 더 큽니다. 탭할 수 있는 기본 영역은 48x48dp입니다.

다양한 색상 채우기를 사용하여 버튼 계층 구조를 표시합니다.

높은 강조

높은 강조 버튼에는 앱의 기본 작업이 포함됩니다. 높은 강조 버튼은 컨테이너에 기본 또는 보조 색상을 사용하고 콘텐츠에 기본(대비) 색상과 보조(대비) 색상을 사용합니다. 자세한 내용은 Wear Material Theming을 참고하세요.

중간 강조 버튼은 대비가 낮은 색상 채우기로 구별됩니다. 여기에는 기본 작업보다 덜 중요한 작업이 포함됩니다. 컨테이너에 표면 색상을 사용하고 콘텐츠에는 표면(대비) 색상을 사용합니다.

또는 중간 강조 버튼에는 맞춤 OutlinedButton 구성요소를 사용합니다. 여기에는 투명한 배경, 불투명도 60% 의 기본 변형 색상 획, 기본 색상 콘텐츠가 있습니다.

낮은 강조 버튼은 채우기가 없는 것으로 구별됩니다. 소형 정렬이 필요한 시계 화면의 작은 영역에 가장 적합합니다. 콘텐츠에는 표면(대비) 색상을 사용합니다.

대형

아이콘 (30 x 30dp)
컨테이너 (60 x 60dp)

Default

아이콘 (26 x 26dp)
컨테이너 (52 x 52dp)

소형

아이콘 (24 x 24dp)
컨테이너 (48 x 48dp)

매우 작게

아이콘 (24 x 24dp)
컨테이너 (32 x 32dp)

최소 48dp인 탭 타겟을 만들려면 이 버튼 주위에 패딩을 추가하는 것이 좋습니다. 접근성을 위한 최소 탭 타겟 크기입니다.

1 버튼

내부 패딩은 동일하게 유지되며 버튼이 너무 많이 늘어나서 상대적인 크기를 유지하는 것을 방지하기 위해 여백은 백분율이어야 합니다.

2 버튼

버튼이 두 개인 경우 버튼이 너무 늘어나서 상대적인 크기를 유지하는 것을 방지하기 위해 비율 내부 여백이 추가됩니다.