Filter Badge

Component 60

About

Filter Badge inspired by Tremor

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Filter Badge to your project and fits it to your theme.

Code

How Filter Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FilterBadge } from "@/components/ui/filter-badge"

export function FilterBadgePill() {
  return (
    <div className="flex flex-wrap justify-center gap-4">
      <FilterBadge 
        variant="pill"
        label="Department"
        value="Sales"
        onRemove={() => {}}
      />
      <FilterBadge 
        variant="pill"
        label="Location"
        value="Zurich"
        onRemove={() => {}}
      />
      <FilterBadge 
        variant="pill"
        label="Sales Volume"
        value="$100K-5M"
        onRemove={() => {}}
      />
      <FilterBadge 
        variant="pill"
        label="Status"
        value="Closed"
        onRemove={() => {}}
      />
    </div>
  )
}