Filter button

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

WantedFilterButton

사용 편의성을 위한 Filter button입니다. 간단한 설정만으로 기본 스타일의 Filter button을 사용할 수 있으며, 내부적으로 CompositionLocal을 활용하여 관련 상태를 주입합니다.

WantedFilterButton(
    text = "필터",
    activeLabel = "3",
    onClick = { /* 클릭 동작 */ }
)

Parameters

이름타입설명
textStringFilterButton에 표시될 텍스트입니다.
modifierModifierModifier를 통해 스타일을 조정할 수 있습니다.
activeLabelStringFilterButton이 활성화되었을 때 표시할 라벨 텍스트입니다.
sizeFilterButtonSizeFilterButton의 크기를 정의하는 enum 값입니다 (기본값: Small).
variantFilterButtonVariantFilterButton의 스타일입니다 (기본값: Solid).
isActiveBooleanFilterButton의 활성화 상태입니다.
isEnableBooleanFilterButton의 사용 가능 상태입니다.
isExpendBoolean확장 가능 상태입니다 (아이콘 변경 목적).
interactionSourceMutableInteractionSource사용자 인터랙션 처리를 위한 객체입니다.
onClick(() -> Unit)?클릭 시 호출되는 콜백 함수입니다.

Overload

기본 설정을 외부에서 주입할 수 있는 커스터마이징 버전의 Filter button입니다. 기본 스타일뿐만 아니라 텍스트 스타일, 색상 등 세부 속성을 설정할 수 있으며, 내부적으로 주어진 FilterButtonDefault 설정값을 기반으로 Filter button을 구성합니다.

WantedFilterButton(
    text = "필터",
    activeLabel = "3",
    filterButtonDefault = customDefault,
    onClick = { /* 클릭 처리 */ }
)
Parameters
이름타입설명
textStringFilterButton에 표시될 텍스트입니다.
modifierModifierModifier를 통해 스타일을 조정할 수 있습니다.
activeLabelStringFilterButton이 활성화되었을 때 표시할 라벨 텍스트입니다.
isExpandedBooleanFilterButton이 확장 상태인지 여부입니다 (화살표 아이콘에 반영됨).
filterButtonDefaultWantedFilterButtonDefault외부에서 주입하는 FilterButton의 기본 설정값입니다.
interactionSourceMutableInteractionSource사용자 인터랙션 처리를 위한 객체입니다.
onClick(() -> Unit)?클릭 시 호출되는 콜백 함수입니다.

Advanced

WantedFilterButtonContract

Filter button에 대한 전반적인 계약을 정의하는 객체입니다. 이 객체는 Filter button의 시각적 변형 및 크기에 대한 enum 클래스를 포함합니다.

WantedFilterButtonDefault

WantedFilterButton의 기본 스타일을 정의하는 데이터 클래스입니다. 크기, 스타일 변형, 활성화 여부, 사용 가능 여부, 아이콘 색상, 배경 색상, 테두리 색상, 텍스트 스타일을 포함합니다.

val chipDefault = WantedFilterButtonDefault(
    size = FilterButtonSize.Medium,
    variant = FilterButtonVariant.Solid,
    isActive = true,
    isEnable = true,
    iconColor = Color.Black,
    backgroundColor = Color.White,
    borderColor = Color.Gray,
    textStyle = TextStyle.Default
)
Properties
이름타입설명
sizeFilterButtonSizeChip의 크기를 설정합니다.
variantFilterButtonVariantChip의 스타일 변형입니다 (Solid, Outlined).
isActiveBooleanChip의 활성화 여부입니다.
isEnabledBooleanChip의 사용 가능 여부입니다.
iconColorColor아이콘의 색상입니다.
backgroundColorColor배경 색상입니다.
borderColorColor테두리 색상입니다.
textStyleTextStyle텍스트 스타일입니다.

Return
타입설명
WantedFilterButtonDefault설정된 WantedFilterButtonDefault 객체를 반환합니다.

WantedFilterButtonDefaults

WantedFilterButton의 기본 스타일을 제공하는 객체입니다.

getDefault

기본 스타일에 맞춰 WantedFilterButtonDefault 객체를 생성합니다. Compose 환경에 따라 Chip의 스타일을 동적으로 결정합니다.

val chipDefault = WantedFilterButtonDefaults.getDefault(
    size = FilterButtonSize.Medium,
    variant = FilterButtonVariant.Solid
)
Parameters
이름타입설명
sizeFilterButtonSizeChip의 크기를 설정합니다.
variantFilterButtonVariantChip의 스타일 변형입니다 (Solid, Outlined).
isActiveBoolean활성화 여부입니다.
isEnableBoolean사용 가능 여부입니다.
iconColorColor아이콘의 색상입니다.
backgroundColorColor배경 색상입니다.
borderColorColor테두리 색상입니다.
textStyleTextStyle텍스트 스타일입니다.

Return
타입설명
WantedFilterButtonDefault설정된 WantedFilterButtonDefault 객체를 반환합니다.

getFilterIconColor

Filter button 전용으로 아이콘 색상을 반환합니다. Variant, 활성화 여부, 사용 가능 여부에 따라 색상이 결정됩니다.

val iconColor = WantedFilterButtonDefaults.getFilterIconColor(
    variant = FilterButtonVariant.Solid,
    isActive = true
)
Parameters
이름타입설명
variantFilterButtonVariantChip의 스타일 변형입니다 (Solid, Outlined).
isActiveBoolean활성화 여부입니다.
isEnableBoolean사용 가능 여부입니다.

Return
타입설명
Int아이콘 색상에 해당하는 리소스 ID를 반환합니다.

Enum

FilterButtonVariant

설명
Solid배경이 채워진 형태입니다.
Outlined테두리만 있는 형태입니다.

FilterButtonSize

설명
Large큰 사이즈입니다.
Medium중간 사이즈입니다.
Small작은 사이즈입니다.
XSmall가장 작은 사이즈입니다.

© 2026 Wanted Lab, Inc.