11번가

Design System

Buttons

버튼(Buttons)은 작업을 수행하는데 사용되는 클릭 가능한 컴포넌트입니다. 컨텐츠 영역이나 화면 하단 영역에 배치되어 중요한 동작을 실행하기 위한 버튼으로 사용자가 다양한 방식으로 페이지와 상호 작용할 수 있도록 합니다.

Types

버튼(Buttons)은 사용성에 따라 Component Type 이 구분됩니다. 각 버튼에는 특정 기능과 일관적인 사용자 경험을 제공하고 있습니다.
따라서 다양한 화면 전체에서 일관되게 구현되어 올바르게 작업 메시지로 전달하는 것이 매우 중요합니다.

Speciality Type Button Component
  1. Speciality Button : 가장 강한 강조하는 버튼으로 사용자의 행동을 명확하게 유도할 때 사용합니다.
  2. Primary Button : 화면의 주요 클릭 유도용으로 사용자의 행동을 명확하게 유도할 때 사용합니다.
  3. Secondary Button : 일반적인 텍스트 버튼보다 더 강조하기 위해 사용됩니다.
  4. Tertiary Button : 덜 눈에 띄고 때로는 독립적인 행동을 위해 화면에서 하위 작업 사용됩니다.

Anatomy

Speciality

  1. label
  2. Container

Primary

  1. label
  2. Container

Secondary

  1. label
  2. Container

Tertiary

  1. label
  2. Container

Emphasis

Button은 사용자의 성공적 작업 수행에 따른 시각적 계층 구조에 차이가 있습니다. 계층 구조에 따른 스타일 가이드를 유의하며, 임의 스타일 추가 및 사용을 제한합니다.

State

Button은 상호작용 할 수 있는 상태를 전달할 수 있게 Normal, Pressed, Disabled 세 가지 상태로 작용합니다.

Buttons 컴포넌트의 상태별 분류
Primary
Secondary
Tertiary
Normal
Primary Button Normal State
Secondary Button Normal State
Tertiary Button Normal State
Pressed
Primary Button Pressed State
Secondary Button Pressed State
Tertiary Button Pressed State
Disabled
Primary Button Disabled State
Secondary Button Disabled State
Tertiary Button Disabled State

Spec

Interactions

긍정적인 행동은 항상 오른쪽으로, 부정적인 행동은 왼쪽으로 사용합니다.

Size

Primary ,Secondary 버튼은 패딩 16 고정이고, Normal - X-small 버튼까지 패딩 8입니다.

Placement

Speciality button은 기본적으로 UI의 최하단에 위치해야 합니다.

Usage

Button은 사용자가 일련의 단계 또는 대화 상자 창을 통해 진행하는 작업은 오른쪽 하단에 정렬하여 일관적인 사용자 경험을 제공합니다. 버튼의 텍스트 레이블은 명확하고 예측 가능하게 나타내어 사용자가 버튼과 상호 작용하고 수행할 수 있게 나타냅니다.

Do

하단 화면에서 주요 클릭 유도용으로 사용자의 행동을 명확하게 유도할 때 Primary-Red버튼을 사용합니다.

Don't

주요 클릭 유도용으로 버튼 배치 시 항상 오른쪽으로 사용합니다.