Navigation

Segmented Filter Tabs

A compact filter control with counts for dashboards, galleries, and release queues.

tabsfiltercount

Installation

Copy and paste the code into your project.

Accessibility notes

For production, manage active state with tab or radio semantics and visible labels.

Preview accent

TypeScript

const filters = [
  { label: "All", count: "42" },
  { label: "Live", count: "18" },
  { label: "Draft", count: "7" },
];

export function SegmentedFilterTabs() {
  return (
    <div className="inline-flex rounded-lg border border-white/12 bg-[#0b0f14]/82 p-1 shadow-xl">
      {filters.map((filter) => (
        <button
          key={filter.label}
          className={filter.label === "Live" ? "rounded-md bg-[#40E0D0] px-3 py-2 text-xs font-bold text-[#0b0f14]" : "rounded-md px-3 py-2 text-xs font-semibold text-slate-400 transition hover:text-white"}
          type="button"
        >
          {filter.label}
          <span className={filter.label === "Live" ? "ml-2 text-[#0b0f14]/70" : "ml-2 text-slate-600"}>{filter.count}</span>
        </button>
      ))}
    </div>
  );
}

Usage

<SegmentedFilterTabs />

Related components

Navigation

Floating Nav Dock

Intermediate

A pill-shaped navigation dock with translucent depth and compact labels.

navdockglass

View component

Navigation

Context Menu Panel

Intermediate

A floating action menu for editor surfaces, AI workspaces, and command-rich tools.

menuactionsfloating

View component

1Brief
2Design
3Code

Navigation

Progress Stepper

Intermediate

A horizontal stepper for onboarding, generation pipelines, and design workflows.

stepsprogressworkflow

View component