Button / Basic

Written By Heesun .

GUIDE

버튼은 사용자가 UI를 제어할 때 사용되거나, 명확한 목적을 가지고 사용자의 행동을 유도할 때 사용됩니다.
본 디자인시스템의 기본 버튼 구성은 크게 3가지로서 text button, icon text button, icon button으로 나뉩니다. 


네이밍 규칙은 ‘내용 구성 > 형태 > 크기 > 칼라 > 상태' 순서로 지정되며, UI 요소들간의 위계질서를 구성하는 순서를 바탕으로 정리되었습니다.

 
 

버튼을 구성하는 기본 요소

컨텐츠를 구성하는 각 요소들의 노출 중요도에 따라 버튼을 강조해서 보여주는 무게감을 달리 설정할 수 있습니다.

 

Container

Element

  • box button의 경우 [확인]과 같이 사용자의 언어로서 명령어가 확실한 경우에 주로 사용합니다.
no_box의 경우 레이블이 길거나 상대적으로 주목도가 높지 않은 경우 사용합니다.

  • icon을 사용할 경우 보다 직관적인 사용성을 위해 레이블을 함께 붙여 사용합니다.
[다운로드]와 같이 사용자의 구체적인 행동을 유도하는 버튼일 경우 함께 사용하는 것을 권장합니다.

  • Icon button은 아이콘을 버튼의 기능으로 사용합니다. 공간이 충분하지 않을 경우 혹은 아이콘이 사용자가 이해하기에 충분히 직관적이거나 대중적인 메타포일 경우 단독으로 레이블 없이 Icon button을 사용할 수 있습니다.

  • solid 형태의 버튼은 배경색이 채워진 박스 형태로 된 가장 일반적인 버튼입니다.
화면의 컨텐츠 영역 또는 하단 영역에 배치하여 화면 내 주요한 액션을 실행하는 버튼으로 사용합니다.

  • outline 형태의 버튼은 배경색 없이 stroke가 지정된 버튼입니다.
UI 화면 안에서 중요도가 solid 버튼보다 하위 레벨에 속할 경우 사용합니다.

  • 박스(solid,outline) 형태처럼 배경, 외곽선 등의 요소가 존재하지 않는 텍스트 또는 아이콘으로만 구성된 버튼입니다.
버튼의 과업이 화면의 전체적인 내용과 크게 관련이 없는 경우 혹은 주목도가 높지 않은 경우 사용합니다.

 

Text Button

 

ANATOMY

  • 버튼의 배경에 적용되는 컬러를 통해 버튼의 속성을 구분할 수 있습니다.

    text 사이즈 및 주변 레이아웃에 따라 버튼의 좌우 패딩 사이즈는 유동적으로 바뀔 수 있으나, 여백이 너무 좁거나 지나치게 많이 차지하지 않게 보여집니다.
모바일의 경우 full-screen width로 늘어날 수 있습니다.

    radius는 최소 16px이지만, 둥근 형태를 유지하기 위해 버튼의 사이즈에 따라 달라집니다.

  • 텍스트, 아이콘, 아이콘+텍스트 형식으로 적용할 수 있으며 중앙 정렬을 기본으로 합니다.

SIZE

text로 구성된 Contained Button은 다양한 화면 환경에 맞출 수 있도록 아래와 같은 사이즈로 제공합니다.
width padding은 되도록 설정된 값 이하로 줄여지지 않지만 주변 레이아웃에 따라 길게 늘어날 수 있습니다.

*Ghost type의 경우 사이즈와 무관하게 width minimum padding 8px입니다.

STATES

  • 사용자가 버튼을 선택할 수 있는 상태입니다.

  • 사용자가 액션 실행을 위해 버튼 위에 마우스를 위에 올려놓은 상태입니다.

  • 사용자가 액션 실행을 위해 버튼을 누르고 있는 상태입니다.

  • 사용자가 실행을 위해 버튼을 누른 후 진행중인 상태를 알릴 수 있습니다. 별도의 progress UI가 없는 한 다운로드 혹은 저장과 같이 전환과 연관이 높은 액션에 사용합니다.
클릭이 불가한 상태이며, 필요시 snackbar로 실행 취소 기회를 제공해줍니다.

  • 사용자가 버튼을 선택할 수 없는 상태입니다.

Contained Button의 상태별 정의는 다음과 같습니다.

 

Icon Text Button

 

ANATOMY

icon x label

  • 아이콘과 레이블 사이의 기본 간격은 8px 입니다.

  • 아이콘과 레이블의 칼라는 동일합니다.

  • 아이콘의 stroke 평균 두께와 텍스트 weight를 비슷하게 맞추어 시각적 무게의 균형감을 이룹니다.

  • icon과 text 사이즈 및 주변 레이아웃에 따라 버튼의 좌우 패딩 사이즈는 유동적으로 바뀔 수 있으나, 여백이 너무 좁거나 지나치게 많이 차지하지 않게 보여집니다.
모바일의 경우 full-screen width로 늘어날 수 있습니다.

  • 아이콘과 레이블은 중앙정렬을 기본으로 구성됩니다.

SIZE

text로 구성된 Box Button은 다양한 화면 환경에 맞출 수 있도록 아래와 같은 사이즈로 제공합니다.
width padding은 되도록 설정된 값 이하로 줄여지지 않지만 주변 레이아웃에 따라 길게 늘어날 수 있습니다.
*(no_box) text button의 경우 사이즈와 무관하게 width minimum padding 8px입니다.

STATES

Text Button의 상태별 정의는 다음과 같습니다.

 

Icon Button

 

SIZE

Icon

아이콘 버튼의 클릭 영역으로 padding 8px을 기본으로 하지만 이는 주변 레이아웃의 구성에 따라 더 좁혀지거나 늘어날 수 있습니다.

SIZE

text로 구성된 Box Button은 다양한 화면 환경에 맞출 수 있도록 아래와 같은 사이즈로 제공합니다.
width padding은 되도록 설정된 값 이하로 줄여지지 않지만 주변 레이아웃에 따라 길게 늘어날 수 있습니다.
*(no_box) text type의 경우 사이즈와 무관하게 width minimum padding 2px입니다.

STATES
Text Button의 상태별 정의는 다음과 같습니다.

Heesun .
Previous

Radio Button
Next

Color