ActiveFilters

Stripe Chip

Under a list's filter row: “Status: Failed ✕” for every filter that is on, and “Clear all” once there are two or more. Stripe's Chip is a filter, not a tag — this is that component. Renders nothing when no filter is on.

pnpm add @zikzuk/ui

import { ActiveFilters } from "@zikzuk/ui";

Three filters

Status:FailedChannel:SMSProvider:Sandeshtech

When to use

Every list with filters, so people see and undo what narrowed the list.

Props

Prop	Type	Description
filters	{ label, value, onRemove }[]	One chip each.
onClearAll	() => void	Shows “Clear all” at two or more.
className	string	Extra classes on the outer element.