Filter button

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

Basic filter button

FilterButton 은 2가지 variant를 사용할 수 있습니다.

  • solid (default)
  • outlined
import { FlexBox, FilterButton } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox gap="12px" flexDirection="column" alignItems="center">
      <FilterButton variant="solid">
        Solid
      </FilterButton>
      <FilterButton variant="outlined">
        Outlined
      </FilterButton>
    </FlexBox>
  );
}

export default Demo;

Sizes

4가지 크기를 지원합니다.

  • xsmall
  • small
  • medium (default)
  • large
import { FilterButton, FlexBox } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox gap="12px" flexDirection="column" alignItems="center">
      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <FilterButton variant="solid" size="xsmall">
          Xsmall
        </FilterButton>
        <FilterButton variant="solid" size="small">
          Small
        </FilterButton>
        <FilterButton variant="solid" size="medium">
          Medium
        </FilterButton>
        <FilterButton variant="solid" size="large">
          Large
        </FilterButton>
      </FlexBox>

      <FlexBox gap="12px" alignItems="center" flexWrap="wrap">
        <FilterButton variant="outlined" size="xsmall">
          Xsmall
        </FilterButton>
        <FilterButton variant="outlined" size="small">
          Small
        </FilterButton>
        <FilterButton variant="outlined" size="medium">
          Medium
        </FilterButton>
        <FilterButton variant="outlined" size="large">
          Large
        </FilterButton>
      </FlexBox>
    </FlexBox>
  )
}

export default Demo;

Active

active prop 을 사용하면 활성화된 상태를 표현할 수 있습니다.

또한 activeLabel prop 을 사용하면 활성화된 필터의 개수를 표현할 수 있습니다.

import { FilterButton, FlexBox } from '@wanteddev/wds';

const Demo = () => {
  return (
    <FlexBox gap="8px" alignItems="center" flexWrap="wrap">
      <FilterButton variant="solid">직군</FilterButton>
      <FilterButton activeLabel={3} variant="solid" active>직무</FilterButton>
      <FilterButton variant="outlined">지역</FilterButton>
      <FilterButton activeLabel={2} variant="outlined" active>태그</FilterButton>
    </FlexBox>
  )
}

export default Demo;

With popover

Popover 컴포넌트와 함께 사용하여 자연스럽게 열리고 닫힌 상태를 표현할 수 있습니다.

혹은 expanded prop 을 사용하여 필터가 열린 상태를 표현할 수 있습니다.

import { FilterButton, FlexBox, Popover, PopoverTrigger, PopoverContent } from '@wanteddev/wds';

const Demo = () => {
  return (
    <Popover>
      <PopoverTrigger>
        <FilterButton variant="solid" active>직군</FilterButton>
      </PopoverTrigger>
      <PopoverContent>
        필터 콘텐츠
      </PopoverContent>
    </Popover>
  )
}

export default Demo;

Accessibility

WAI-ARIA button Pattern 을 준수합니다.

API

NameTypesdefaultValue
as
ElementType
-
size
"small" | "medium" | "large" | "xsmall"
"medium"
variant
"solid" | "outlined"
"solid"
active
boolean
-
expanded
boolean
-
disabled
boolean
false
disableInteraction
boolean
false
activeLabel
ReactNode
-
children
ReactNode
-
sx
SxProp
-
xl
Merge<Pick<FilterButtonDefaultProps, "size">, { sx?: CSSInterpolation; }> | undefined
-
lg
Merge<Pick<FilterButtonDefaultProps, "size">, { sx?: CSSInterpolation; }> | undefined
-
md
Merge<Pick<FilterButtonDefaultProps, "size">, { sx?: CSSInterpolation; }> | undefined
-
sm
Merge<Pick<FilterButtonDefaultProps, "size">, { sx?: CSSInterpolation; }> | undefined
-
xs
Merge<Pick<FilterButtonDefaultProps, "size">, { sx?: CSSInterpolation; }> | undefined
-

© 2026 Wanted Lab, Inc.