Filter Button
사용자가 원하는 조건에 따라 데이터를 정렬하거나, 특정 기준에 맞는 항목만 추출할 때 사용하는 버튼입니다.
컴포넌트 명세 (Component Specification)
Anatomy
text
icon
기본 기능
검색 결과나 리스트에서 데이터를 필터링하거나 정렬 조건을 변경하는 기능
시각 옵션
fill
ghost
상태
default
active
내부 구성
text
icon
사이즈 가이드 (Size Guide )
Filter Button 크기는 L, S 로 제공되며, 내부 Icon Set의 크기는 20, 16px을 제공합니다
상태 (State)
Filter Button의 상태는 Default, Active 총 2가지 State로 구성됩니다.
분류 (Variant)
총 2가지의 아이콘 타입을 변경하여 화면에 맞게 적절하게 사용합니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Filter Button이 배치되고 활용되는 패턴입니다.
리스트 상단 필터 (Top List Filter)
리스트 상단 좌측에 필터를 배치합니다. 오토 레이아웃
Auto(Space between)를 적용해 양끝 정렬합니다.
입력 폼 결합 필터 (Filter with Input)
필터와 우측 입력 폼 간의 간격(Spacing)을 0으로 밀착시켜 하나의
컴포넌트처럼 연결합니다. (화면 기본 마진 16px 제외)
마스터 컴포넌트 (Master Component)
text
text
text
text
text
text
text
text