FilterChip

<FilterChip size="md" selected={true}> 필터 </FilterChip>

<FilterChip size="md" selected={true}>
  필터
</FilterChip>

Loading...

How to use

import { FilterChip } from '@vibrant-ui/components';

Properties

Prop	Type	Default	Description
size	md | sm		FilterChip의 크기를 지정합니다.
selected	boolean		FilterChip이 선택되어 있는지 여부를 지정합니다.
startIcon	ReactElement		FilterChip의 선두 자리에 들어갈 아이콘을 지정합니다.
endIcon	ReactElement		FilterChip의 후미 자리에 들어갈 아이콘을 지정합니다.
disabled	boolean		FilterChip의 비활성화 상태를 지정합니다.
onClick	() => void		FilterChip이 클릭/터치되었을 경우 실행할 동작을 지정합니다.
children	TextChildren		FilterChip의 콘텐츠를 지정합니다.
href	string		버튼이 클릭됐을 때 이동할 URL

Usage

크기

<HStack spacing={12} alignVertical="center"> <FilterChip size="sm">필터</FilterChip> <FilterChip size="md">필터</FilterChip> </HStack>

<HStack spacing={12} alignVertical="center">
  <FilterChip size="sm">필터</FilterChip>
  <FilterChip size="md">필터</FilterChip>
</HStack>

Loading...

아이콘

startIcon와 endIcon 속성으로 좌/우측에 표시되는 아이콘을 설정할 수 있습니다.

<HStack spacing={12}> <FilterChip size="md" startIcon={<Icon.Clip.Regular />} endIcon={<Icon.ArrowTriangleDown.Regular />} > 필터 </FilterChip> </HStack>

<HStack spacing={12}>
  <FilterChip
    size="md"
    startIcon={<Icon.Clip.Regular />}
    endIcon={<Icon.ArrowTriangleDown.Regular />}
  >
    필터
  </FilterChip>
</HStack>

Loading...

링크

href 속성으로 버튼이 클릭됐을 때 이동할 URL을 지정할 수 있습니다. href이 지정되면 button 요소가 아닌 a 요소로 렌더링됩니다.

<HStack spacing={12}> <FilterChip size="md" href="/"> 링크 </FilterChip> </HStack>

<HStack spacing={12}>
  <FilterChip size="md" href="/">
    링크
  </FilterChip>
</HStack>

Loading...