Pill Tabs

Pill Tabs

Component File: src/components/shared/PillTabs.tsx Route: Shared component Access Level: All authenticated users Last Updated: March 8, 2026 Status: Active

Overview

PillTabs is the standard segmented control for page-level tab and status-filter navigation. Use it instead of recreating the rounded tab shell in individual feature files.

Props

interface PillTab<T extends string = string> {
  key: T;
  label: React.ReactNode;
  disabled?: boolean;
}

interface PillTabsProps<T extends string = string> {
  tabs: PillTab<T>[];
  activeTab: T;
  onChange: (key: T) => void;
  size?: 'sm' | 'default';
  className?: string;
  ariaLabel?: string;
}

Usage

<PillTabs
  tabs={[
    { key: 'draft', label: 'Draft' },
    { key: 'published', label: 'Published' },
    { key: 'archived', label: 'Archived', disabled: true },
  ]}
  activeTab={status}
  onChange={setStatus}
  ariaLabel="Page status tabs"
/>

Standard Rules

• Use for page-level segmented navigation and status filters.
• Labels may include icons, badges, or counts through ReactNode.
• Prefer size="sm" when the surrounding UI previously used the compact pill style.
• Do not hand-roll the inline-flex ... rounded-full p-1 shell for tool pages when this component fits.

Related Documentation

• DEVELOPER-PLAYBOOK.md
• UI-COMPONENT-REFERENCE.md

Synced from IFMmvp-Frontend documentation: pages/components/26-PILL-TABS.md