Button

Button (버튼)

버튼은 단일 동작(action)이나 이벤트를 실행하는 컴포넌트예요. 응답 제출, 변경 커밋, 다음 단계 이동 같은 중요한 동작에 사용해요. 다른 곳으로 이동하는 것이라면 링크(link)를 사용하는 게 낫죠.

출처: 문서

본문

버튼은 단일 동작이나 이벤트를 실행해요. 응답 제출, 변경 커밋, 다음 단계로 이동 같은 중요한 동작에 버튼을 사용하세요. 다른 곳으로 이동하는 용도라면 링크를 시도해 보세요.

Types (유형)

버튼(Button)

표준 버튼은 단일 동작이나 이벤트를 실행해요.

분할 버튼(Split button)

분할 버튼은 사람들이 관련된 동작 몇 가지 중 하나를 선택할 수 있게 해 줘요. 우세한 동작(dominant action)은 버튼 라벨이고, 추가 동작은 메뉴 안에 숨겨져 있죠. 우세한 동작은 메뉴에서 반복해서 나타내면 안 돼요.

메뉴 버튼(Menu button)

메뉴 버튼은 옵션 메뉴의 표시를 토글(toggle)해요. 분할 버튼과 달리 메뉴 버튼은 기본(primary) 동작을 드러내지 않아요.

복합 버튼(Compound button)

복합 버튼은 주 제목(main title)과 제목에 대한 추가 설명(description)을 포함해요. 더 많은 세부 내용을 포함하는 것이 도움이 될 때 사용하세요.

Behavior (동작)

토글 버튼(Toggle button)

토글 버튼은 상태를 켜짐(on)과 꺼짐(off)으로 바꾸는 두 상태 동작이에요. 버튼의 기본(rest) 상태는 '꺼짐'을, 선택(selected) 상태는 '켜짐'을 나타내요. 버튼(button)과 복합 버튼(compound button) 유형은 토글 동작을 가질 수 있어요.

토글 버튼은 보통 툴바(toolbar)에서 사용해요. 설정 패널 같은 다른 시나리오에서는 스위치(switch)를 사용해서, 서로 배타적인 두 옵션 중 하나를 고르고 즉각적인 변경을 일으키도록 하세요.

토글 동작을 표시하려면 버튼의 상태 프로퍼티를 조작하세요. 코드에서는 ToggleButton 컴포넌트를 사용하고 checked prop을 전달해요.

Layout (레이아웃)

레이아웃에서 가장 중요한 동작에는 기본(primary) 버튼을 하나만 사용하세요. 우선순위가 같은 버튼이 두 개보다 많다면, 모든 버튼에 중립(neutral) 배경을 사용하세요.

사용 가능한 2차 동작(secondary action)이 많다면, 모든 버튼에 outline, subtle, transparent 모양(appearance)을 사용해서 복잡한 레이아웃을 피하세요.

  • 기본 버튼에 눈에 띄는 위치를 부여하세요.
  • 2차 동작에 같은 시각적 가중치를 주지 마세요.
  • 기본 버튼 동작에는 항상 다른 동작들의 위쪽이나 왼쪽에 눈에 띄는 배치를 주세요. 오른쪽에서 왼쪽으로 읽는 언어(RTL)에서는 기본 버튼이 오른쪽에 배치돼요.

Accessibility (접근성)

토글 버튼 동작과 상태

토글 버튼은 두 가지 상호 보완적인 정보를 전달해요. 컴포넌트의 현재 상태, 그리고 사람이 컴포넌트와 상호작용하면 어떤 일이 일어나는지가 그것이에요. 가능하면 텍스트와 함께, 아이콘이나 색상의 변화 같은 눈에 보이는 표시 변화를 사용해서 두 정보를 모두 전달하세요. 상태와 동작을 모두 전달하는 맥락을 주세요.

버튼의 색 대비(Color contrast)

버튼이 시각적으로 접근 가능하도록, 모든 상호작용 상태에서 버튼 텍스트는 배경에 대해 4.5:1, 아이콘은 3:1 대비를 통과해야 해요. 버튼 안의 텍스트와 아이콘이 대비 요구 사항을 충족하는 한, 버튼 테두리(stroke)에는 대비 요구 사항이 없어요.

비활성(disabled) 버튼은 상호작용이 아니므로 색 대비를 통과할 필요가 없어요.

툴팁과 ARIA 라벨

비활성 버튼에는 무엇이 사용 불가능한지, 왜 그런지, 그리고/또는 어떻게 접근할 수 있는지 알려주는 툴팁을 보여주세요.

분할 버튼에서 기본 버튼 라벨의 일부가 2차 버튼 옵션에 반복되지 않는 경우, 생략된 단어를 aria-describedby 라벨에 포함해서 각 옵션의 의미가 화면 읽기 프로그램에 접근 가능하도록 하세요.

예를 들어 기본 버튼 라벨이 New message이고 2차 옵션의 보이는 라벨이 (New라는 단어 없이) 그냥 Event인 분할 버튼이 있다면, 그 메뉴 옵션에 New event를 aria-describedby로 사용하세요.

Content (콘텐츠)

일반적으로 다음에 일어날 동작을 반영하는 능동적인 언어를 사용하세요. 간결하게, 보통 단일 동사가 가장 좋지만 명확성을 높인다면 명사를 포함해도 돼요. 문장식 대문자를 사용하고 끝 문장 부호는 쓰지 마세요.

추가하거나 만들기(Add or create)

사람이 새로 무엇인가를 만들 수 있다면, 대부분의 경우 버튼 라벨로 New를 사용하고 그 뒤에 만들 수 있는 것의 이름을 붙이세요. 예를 들어 New solution이나 New mail처럼요.

메뉴 버튼에서 메뉴 안에 여러 옵션이 있는 메뉴 버튼에서는 버튼 라벨로 New를 사용하세요. 메뉴 안의 옵션 라벨은 New를 빼고 새로 만들 것의 이름만, 예를 들어 Message나 Event처럼 명시하세요.

분할 버튼에서 기본 상태에 기본 동작을 표시하는 분할 버튼에서는, 기본 동작 라벨과 각 옵션에 전체 구를 사용하세요. 기본 동작은 2차 옵션 목록에서 반복해서 나타내면 안 돼요.

기존 항목을 새 위치에 추가하거나 이동할 때는 버튼 라벨로 Add를 사용하고 그 뒤에 기존 항목의 유형을 붙이세요. 예를 들어 Add agents나 Add people처럼요.

가능하면 버튼은 제목에 응답하세요

다이얼로그(dialog)나 드로어(drawer)처럼 제목 슬롯이 있는 2차 표면에서는, 작업을 위한 제목의 주요 정보에 구체적으로 응답하는 버튼 라벨을 작성하세요. 예를 들어 Delete this file?이라는 제목에는 Delete와 Cancel이라는 라벨의 버튼이 있어야 해요.

다단계 흐름에서 이동하기

마법사(wizard)나 캐러셀(carousel)처럼 전용 표면이 있는 다단계 흐름에서는, 다음 단계로 진행하는 버튼에 Next(Continue 아님)를 사용하세요. 사용자에게 뒤로 갈 옵션을 주려면 Previous(Back 아님)를 사용하세요.

작업을 끝내는 버튼: Done, Finish, Close, Got it, Dismiss

사용자의 확인(acknowledgement)만 필요한 다단계 흐름의 마지막 화면에는 Done을 사용하세요. 흐름의 마지막 화면에서는 Next 버튼이 Done으로 바뀌어요.

작업 중 선택한 옵션이 버튼을 명시적으로 선택할 때만 커밋되는 경우에는 Finish를 사용하세요.

오류가 아니고 콜 투 액션(call to action)이 없는 정보성 메시지에는 Close를 사용하세요.

오류 메시지에서 오류를 해제하는 버튼 라벨로 OK를 사용하지 마세요. 대신 Close를 사용하세요. 오류가 용납 가능하다는 인상을 주는 것을 피할 수 있어요.

Close와 Cancel을 혼동하지 마세요.

  • 진행 중인 작업을 멈추고, 해당한다면 작업이 실행 중인 표면을 닫고, 변경 사항을 저장하지 않고 이전 상태로 돌아갈 때는 Cancel을 사용하세요.
  • 진행 중인 작업의 상태에 영향 없이 다이얼로그, 드로어, 창을 닫을 때는 Close를 사용하세요. 이것은 반복적으로 'X' 버튼의 표준 툴팁 라벨이기도 해요. 'X' 버튼을 Close 버튼과 함께 사용하지 마세요.

닫기 전에 콘텐츠를 읽는 것이 중요함을 나타낼 때는 Got it을 사용하세요. 이것은 사용자에게 새 앱이나 기능에 대해 알릴 때 유용하며, 주로 티칭 팝오버(teaching popover)와 FRE에서 사용돼요.

이 버튼이 표면을 닫을 뿐 아니라 나중에 알림과 함께 다시 뜨는 것을 막는 경우에는 Dismiss를 사용하세요. 더 명확하게 하려면 Don't show this again 체크박스를 제공하는 것이 도움이 될 수 있어요.

Apply 대 Save

이상적인 경험에서는 사용자가 만든 변경이 자동 저장되어 데이터를 잃을 걱정이 없어요. 자동 저장(auto-save) 기능이 불가능하다면, 사용자에게 변경 사항을 명시적으로 저장할 수 있는 옵션을 주세요. 버튼 라벨로 Save를 사용해서 사용자가 변경 사항을 커밋할 수 있음을 알리세요. 변경 사항이 커밋되었는지 알 수 있도록 성공이나 오류 신호를 꼭 포함하세요. 이런 시나리오에는 메시지 바(message bar)와 확인 토스트(confirmation toast)가 잘 동작해요.

더 알아보기 (Learn more)