Chip

간결한 정보나 선택 상태를 시각적으로 표현합니다. 태그, 필터, 선택된 항목 등을 나타내며, 아이콘 및 텍스트와 함께 사용할 수 있습니다. 작고 유연한 형태로 다양한 인터랙션을 지원합니다.

Anatomy

  1. 1. Leading content
  2. 2. Label
  3. 3. Trailing content
  4. 4. Container

Variants

Variants
Leading content option
Trailing content option

States

Size

좌우 너비는 자유롭게 커스터마이징하여 사용할 수 있으나 높이는 변경할 수 없습니다.

Usage

Chip group

클릭으로 상태로 변경할 수 있습니다. 선택할 수 있는 모든 값이 한 화면에 보일 때 사용하는 것을 권장합니다. 요소를 나열할 시 요소 간의 간격을 균일하게 유지하며 레이아웃을 채웁니다.

Select chip

Select에서 사용할 때 선택된 값을 표현할 수 있습니다.

Hierarchy

Level.2 → Solid는 Active 상태에서 Outlined보다 높은 위계를 가지며 화면 전체를 컨트롤 합니다.

Level.1 → Outlined는 Active 상태에서 Solid보다 낮은 위계를 가지며 일부 영역, 다중 선택 시 사용합니다.

Role

Clickable value

클릭으로 삭제, 추가, 이동이 가능한 값을 표현할 때 Chip을 사용합니다.

Category

Tab보다 낮은 레벨로 화면 혹은 섹션에 뿌려지는 값을 구분할 때 Chip으로 구성된 카테고리를 사용합니다.

How to use

Do

Tab의 하위에서 카테고리를 구분하여 사용할 수 있습니다.

Don’t

Border의 색상이나 둥글기를 임의로 변경하여 사용하지 않습니다.

Customize

Chip
contentColor
backgroundColor
activeColor

© 2026 Wanted Lab, Inc.