Button

버튼은 사용자가 특정 작업이나 명령을 실행할 수 있게 돕는 핵심 UI 요소입니다. 즉각적인 동작을 유도하며, 직관적인 텍스트나 아이콘을 사용하여 명확한 사용자 경험을 제공합니다.

Anatomy

Anatomy

  • Text label
  • Container
  • Icon (Optional)

Type

Container 속성에 따라 Primary, Secondary, Tertiary 타입의 기본 박스 형태 버튼을 제공합니다. 총 3가지 스타일로, 버튼의 계층 구조와 중요도에 맞게 사용합니다.

  • Primary button

    Primary button

    Primary button 컴포넌트는 가장 중요한 액션을 나타내는 버튼으로, 강조된 색상과 크기로 다른 버튼과 구분되어 시각적 우선순위를 제공합니다. '장바구니', '구매하기' 등 수행할 행동을 명확히 전달하며, 박스 버튼 형태에서만 사용됩니다. 한 영역에서는 하나의 행동만 유도해야 합니다.

    Secondary button

    주로 Primary button의 보조 역할을 합니다. 색상이나 크기에서 더 부드럽거나 중립적인 스타일을 가집니다. 

    Tertiary button

    기본 버튼(Primary button)과 보조 버튼(Secondary button)과 함께 사용되며, 상대적으로 중요도가 낮은 작업이나 선택을 나타냅니다. 시각적으로 부드럽게 디자인되며, 가장 낮은 위계로 전 채널에서 공통으로 사용됩니다.

Spec

  • Size

    Size

    버튼의 높이 값을 기준으로 사이즈를 정의합니다. Xlarge, Large, Medium, Small, Xsmall을 사용하며, 사이즈에 따라 폰트 크기, 아이콘 사이즈, 레디어스, 패딩 등이 달라집니다.

Button element pattern

button_Box

주로 사용하는 기본적인 박스 형태의 버튼 타입입니다.

button_Text

특정 영역에 사용되는 버튼으로 낮은 중요도에 사용되는 타입입니다. container 없이 text label 단독 또는 icon과 결합된 형태의 버튼 타입입니다. 아이콘의 위치에 따라 right, left, none 3가지 타입으로 사용됩니다.

button_Icon

아이콘을 단독으로 사용하는 버튼으로 명확한 의미를 나타내야 합니다. container의 유무와 형태에 따라 box, round, none 3가지 타입으로 사용됩니다.

button_Capsule

특정 영역에 사용되는 타입으로 아이콘을 필수로 동반해야 합니다. radius값은 사이즈에 따라 최대 수치를 적용하여 사용합니다. 해당 버튼에서는 filled container 사용을 금지합니다.

State

사용자의 상호작용에 따라 여러 가지 상태로 변할 수 있으며, 각 상태는 버튼의 현재 상황이나 사용자의 행동을 반영합니다. Default, Hover/Pressed, Disabled 3가지 상태로 사용합니다.

Default

button_Box_Default_01

Hover

button_Box_Hover_01

Disabled

button_Box_Disabled_01

Usage

Do

Do

화면 사이즈 가변(와이드 대응)시 아이콘 버튼을 제외한 박스 버튼의 w값이 가변되도록 합니다.

Don’t

Don’t

화면 사이즈 가변(와이드 대응)시 양쪽 마진 또는 버튼 사이의 간격값은 유지되어야 합니다.

© KYOBO BOOK CENTRE교보문고 바로가기