Icon Button Usage
Hierarchy
Icon button은 위계에 따른 variant가 존재합니다. 버튼의 위계는 맥락에 따른 중요도를 시각적으로 나타내는 데에 있어 큰 역할을 하기 때문에 제품 내부에서 올바른 위계를 설정하는 것이 중요합니다.
| Variant | Hierarchy | Usage |
|---|---|---|
| Primary | Highest | 주요 과업 수행, 과업 완료, 사용자 확인, 다음 단계로 이동 등 맥락에서 가장 중요한 핵심 사용자 액션이 요구되는 곳에 사용. 맥락별 단일 사용으로 제한. |
| Secondary | High | 필요한 경우 사용자의 집중을 충분히 끌 수 있는 주요 액션이 요구되는 곳에 사용 |
| Tertiary | Medium | 사용자 여정에서 필수적이지 않지만 보조적인 기능을 제공하는 곳에 사용 |
| Ghost | Medium | 초기화, 새로 고침 등 현재 맥락에서 영향을 끼치지 않거나 선택적인 옵션을 제공하는 경우에 사용 |
Highest
Primary button은 주요 과업 수행, 과업 완료, 사용자 확인, 다음 단계로 이동 등 맥락에서 가장 중요한 핵심 사용자 액션이 요구되는 곳에 선별적으로 사용합니다.
High
Secondary button은 맥락상 가장 중요하지는 않지만, 필요한 경우 사용자의 집중을 충분히 끌 수 있는 주요 액션이 요구되는 곳에 사용합니다.
Medium
Tertiary button은 사용자 여정에서 필수적이지 않지만 보조적인 기능을 제공하는 곳에 사용합니다.
Ghost button은 초기화, 새로 고침 등 현재 맥락에서 영향을 끼치지 않거나 선택적인 옵션을 제공하는 경우에 사용합니다.
Layout
Spacing
Common Cases
Medium과 small 사이즈의 버튼 사이 간격은 12px로, x-small 사이즈의 간격은 8px로 적용합니다.
Ghost Button Group
Ghost 버튼으로 이루어진 버튼 그룹은 상황에 따라 간격 없이 사용할 수 있습니다.
Placement
여러 버튼들이 나란히 함께 배치할 때 배치 순서는 버튼의 hierarchy가 높은 순서로 align 방향을 따르는 것이 권장됩니다. 예를 들어, 버튼들이 우측 align을 기준으로 배치되어 있을 때 접근이 용이하도록 중요도가 높은 버튼들은 우측에 위치시킵니다.
보조 기능을 제공하는 ghost 버튼은 예외로 우측 가장자리에 위치할 수 있습니다.
