Filter button

콘텐츠 필터링을 위한 컴팩트한 선택 컨트롤로, Icon과 Label을 포함하며, 선택 상태에 따라 배경색과 테두리가 변경되어 사용자에게 명확한 시각적 피드백을 제공합니다.

Anatomy

  1. 1. Label
  2. 2. Container
  3. 3. Trailing icon

Variants

Variants
Size

States

Size

사이즈 별로 높이와 Font size가 고정 되어있으며 너비는 Label의 길이에 비례합니다.

Trigger components

한 개 이상의 값을 선택할 수 있으며 가장 상단에 선택 되어있는 요소만 명칭이 모두 보이며 ‘{요소명} 외 {N}개’로 표기 됩니다. Menu는 웹에서만 호출이 가능합니다.

Bottom sheet, Popup과 같은 모든 형태의 모달을 호출할 수 있으며 모바일에서는 Menu대신 Bottom sheet를 호출합니다. 이 외에도 모바일에서 상세한 필터를 제공할 때에는 Bottom sheet, 데스크톱 환경에서는 Popup 형태의 모달을 활용할 수 있습니다.

Timing of applying value

Immediately

Filter button에서 한 개의 값만 선택할 시 즉시 값이 반영되며 호출된 컴포넌트가 닫힙니다.

Click to button

Filter button에서 두 개 이상의 값을 선택할 시 적용 버튼을 눌러 값을 반영합니다. 다중 선택 된 항목은 외 1개와 같이 줄여서 표기하는 것을 권장합니다.

Hierarchy

Level.2 → 한 개 이하의 중요한 필터가 단독으로 위치할 때 사용합니다.

Level.1 → 두 개 이상의 필터가 나란히 위치할 때 사용합니다.

Usage

어떤 필터인지 인지할 수 있도록 명확하고 간결한 표현으로 라벨을 작성합니다. 단, 미리 세팅 되어있는 값으로 어떤 종류의 필터인지 유추가 가능한 경우에는 기본 선택 값을 설정하여 사용자의 편의성을 높일 수 있습니다.

How to use

Do

필터의 수가 많거나 다양할 경우 성격이 다른 필터를 구분하여 사용자가 종류를 명확하게 구분할 수 있도록 화면을 설계합니다.

Don’t

폰트 스타일을 또는 Dropdown의 Icon을 변경하여 사용하지 않습니다.

Customize

Filter button
contentColor

© 2026 Wanted Lab, Inc.