FilterPill

API reference and demos for FilterPill.

Source

Import

import { FilterPill } from "@flanksource/clicky-ui/data";

Demos

Playground · Open in Storybook

Binary · Open in Storybook

Tri State · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
badge	string	—	Classes for the count badge background.
className	string	—	Classes applied to the pill root.
count	number	—	Optional count: a badge before the label, or muted text after it on a tri-state option.
icon	string | ComponentClass<any, any> | FunctionComponent<any>	—	Iconify name or imported icon component.
interactive	boolean	true	When false the tri-state switch renders without button semantics (an aria-hidden span, nothing focusable) for hosts that own focus and keyboard themselves — e.g. a combobox listbox option, where a nested focusable button would violate the option content model. The region click zones remain active. Defaults to true.
label*	ReactNode	—	Primary visible label.
mode	enum	neutral	Visual and semantic state for the pill.
onClick	(…) => void	—	Legacy single-click handler, used when onModeChange is not provided.
onModeChange	(…) => void	—	Tri-state handler. When provided the pill renders as a toggle with a left minus (exclude) and right plus (include) region. Clicking a side toggles that state against "neutral"; clicking the label cycles neutral → include → exclude → neutral.
title	string	—	Browser tooltip and accessible label for tri-state controls.
togglePosition	enum	left	Places the tri-state toggle before or after the label.