FilterChip

Toggle chip for filtering.

import { FilterChip } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<FilterChip label="Events" selected />

<FilterChip label="Events" disabled />

Prop	Type	Default	Description
`label` *	`string`	—	Text label displayed in the chip.
`selected`	`boolean`	`false`	Whether the chip is in selected/active state.
`onToggle`	`(selected: boolean) => void`	—	Callback fired when the chip is toggled.
`color`	`string`	—	Custom accent color for the selected state (CSS color value).
`icon`	`JSX.Element`	—	Icon element rendered before the label.
`disabled`	`boolean`	`false`	Disable chip interaction.
`size`	`'sm' \| 'md'`	`'md'`	Size variant.
`class`	`string`	—	Additional CSS classes.
`style`	`JSX.CSSProperties`	—	Inline styles.

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.