11번가

Design System

Chip

Chip은 항목을 설명하는 키워드를 사용하여 항목에 레이블을 지정하거나 분류하거나 구성합니다.
사용자는 정보를 입력하고 선택하고 콘텐츠를 필터링하거나 작업을 트리거할 수 있습니다.

Types

Chip의 사용성에 따라 Component Type 이 구분됩니다.
최소 두 가지 옵션이 있는 경우에 필터링을 목적으로 사용되며, 사용자는 한 가지만 선택할 수 있습니다. 위치 이동은 불가하며 경우에 따라 삭제만 가능합니다.

Choice Component Type
  1. Choice chip : 여러 선택 옵션중에 1개를 선택하여 해당 선택한 결과값만 노출할 때 사용합니다.
  2. Input chip : 삭제가 가능하며 다른 속성의 항목이 선택 될 때 사용되는 정보를 나타냅니다.
  3. Filter chip : Chip 선택 시 목록에서 선택한 항목들의 결과만 선별해서 보여줄 때 사용합니다.

Anatomy

  1. Container
  2. Text
  3. Icon(Optional)

State

Chips는 Selected/Unselected에 따라 Deselected, Selected, Disabled 상태로 분류됩니다.
Selected는 Active된 상태로 간주됩니다.

Chip State
Choice
Input
Filter
Deselected
Choice chip Deselected 케이스
Input chip Deselected 케이스
Filter chip Deselected 케이스
Selected
Choice chip Selected 케�이스
Filter chip Selected 케이스
Disabled
Choice chip Disabled 케이스
Input chip Disabled 케이스
Filter chip Disabled 케이스

Spec

Color

Active 시 Filter Chips 컬러는 해당 화면 카테고리 색상이 적용됩니다.

Text Byte

Chip 하나 당 최대 글자 수는 10자(22byte, 공백 포함)로 제한됩니다. 최대 글자 수를 넘어갈 경우 자름 처리됩니다.

Placement

Chip은 좌측 정렬을 기본으로 두 줄 형 사용이 가능합니다. 좌측 마진은 16으로 고정이며, 칩 간의 간격은 6을 적용합니다.

Usage

Chips을 통해 사용자는 정보를 입력하고 선택하고 콘텐츠를 필터링하거나 작업을 트리거할 수 있습니다. 버튼은 일관되고 친숙한 클릭 유도문과 함께 표시되어야 하지만 Chips은 여러 대화형 요소의 그룹으로 동적으로 표시되어야 합니다.

Do

속성 혹은 액션을 명확하게 표시합니다.

Don't

말줄임을 사용할 수 없습니다.