Components / Controls

Filter Chip

A filter chip with a live count and an optional status dot.

Install — needs @hiip registered in components.json

bunx shadcn@latest add @hiip/filter-chip

Or by URL, with the token in the query

bunx shadcn@latest add "https://ui.hiip.ai/r/filter-chip.json?token=$HIIP_REGISTRY_TOKEN"

Both need a token — set one up.

Anatomy

Import from components/ui/hiip-ui/filter-chip.

<FilterChip />

Examples

function FilterChipDemo() {
  const [active, setActive] = useState("all");
  const chips = [
    { id: "all", label: "All", count: 40, dot: undefined },
    { id: "ok", label: "Imported", count: 31, dot: "bg-emerald-500" },
    { id: "skip", label: "Skipped", count: 6, dot: "bg-amber-500" },
    { id: "fail", label: "Failed", count: 3, dot: "bg-destructive" },
  ];
  return (
    <div className="flex flex-wrap gap-2">
      {chips.map((c) => (
        <FilterChip
          key={c.id}
          label={c.label}
          count={c.count}
          dot={c.dot}
          active={active === c.id}
          onClick={() => setActive(c.id)}
        />
      ))}
    </div>
  );
}

API Reference

Generated from the source. Props forwarded to the underlying element are not listed.

FilterChip

Prop	Type	Default
`active`required	`boolean`	—
`count`required	`number`	—
`label`required	`string`	—
`onClick`required	`() => void`	—
`disabled` Off while the page is busy — the count on this chip is the thing being recomputed, so clicking it mid-flight filters on a number that is about to change.	`boolean \| undefined`	—
`dot`	`string \| undefined`	—

Type

registry:ui

Files written

components/ui/hiip-ui/filter-chip.tsx