Button
버튼(Buttons)은 작업을 수행하는데 사용되는 클릭 가능한 컴포넌트입니다.
사용자가 서비스를 이용하는 과정에서 어떤 행동이 중요한지에 따라 관련된 버튼이 다양한 스타일로 사용됩니다.
사용자가 서비스를 이용하는 과정에서 어떤 행동이 중요한지에 따라 관련된 버튼이 다양한 스타일로 사용됩니다.
Anatomy
기본 버튼
기본 버튼
03
01
02
- 텍스트 레이블: 버튼을 눌렀을 때 실행되는 기능에 대한 단어로 이루어진 설명으로 사용됩니다.
- 컨테이너(선택): 버튼을 배경과 구분하는 시각적인 수단으로 면 또는 선으로 표현하여 사용됩니다.
- 아이콘(선택): 버튼을 눌렀을 때 실행되는 기능을 텍스트 대신 시각적인 상징으로 표현하여 사용됩니다.
Component
버튼은 중요도와 쓰임새에 따라 세부 스타일을 분류하여 사용합니다.
Primary button
Secondary button
Tertiary button
Link button
Icon button
- Primary button : 주요 버튼(Primary Button)은 페이지 키 액션에 사용하는 Button으로 한 페이지에 한 번만 사용합니다.
- Tertiary button : 제삼 버튼(tertiary button)은 사용자 판단에 영향을 주지 않는 플로우에 사용합니다.
- Secondary button : 이차 버튼(Secondary Button)은 Primary Buttons의 보조로 사용합니다.
- Link button : 링크 버튼(link button)은 링크가 있는 버튼에 사용합니다.
- Icon button : 아이콘 버튼(icon button)은 아이콘만으로 버튼의 역할을 표현할 수 있을 때 사용합니다.
Size
버튼 사이즈는 높이 기준 4가지로 구분됩니다. 사이즈에 따라 폰트 / 아이콘 / 패딩 값에 대한 차이가 있으므로 유의하여 사용하도록 합니다.
height : 54px
height : 48px
height : 40px
height : 36px
State
상태는 배경 색상 기준 3가지로 구분됩니다. Default / Hover / Disable 로 구분되며 각 상태에 따라 적절히 사용합니다. Semantic Color로 버튼을 생성할 경우, 상태에 따른 색상은 Foundation의 Color부분을 참고합니다.
color
Defaultdd
Hover
Disable
Primary
Default
Default
Default
Secondary
Secondary
Secondary
Secondary
Tertiary
Tertiary
Tertiary
Tertiary
Link
Tertiary
Tertiary
Tertiary
Icon only
사용 가이드
아이콘 사용
버튼 내에 아이콘을 사용할 때 우측 외엔 사용을 지양하며, 아이콘의 색상은 2가지 이상 사용하지 않도록 주의합니다.
Do
Don’t