TabGroup

Pill-style segmented control with a sliding active indicator. Supports hover ghost effects, ResizeObserver-based re-measurement, and mono-spaced tab labels.

Tab Group Configurations
Metric Toggle (Mono)
Selected: $
Entity Type
Selected: orders
Time Frame
Selected: MTD

Interactive Demo

Active tab: $ (2 tabs)

Usage

JSX
import { TabGroup } from '@so.boss/gloss-ui';
import type { GroupDef } from '@so.boss/gloss-ui';

const group: GroupDef = {
  id: 'period',
  tabs: [
    { id: 'MTD', label: 'MTD' },
    { id: 'QTD', label: 'QTD' },
    { id: 'YTD', label: 'YTD' },
  ],
};

<TabGroup
  group={group}
  activeId={selected}
  onSelect={(id) => setSelected(id)}
/>

Props Reference

TabGroup

PropTypeDefaultDescription
groupGroupDef—Tab group definition with id and tabs array
activeIdstring—Currently active tab id
onSelect(tabId: string) => void—Called when a different tab is clicked
onToggle() => void—Called when the active tab is clicked again

TabDef

PropertyTypeDescription
idstringUnique tab identifier
labelstringDisplay text for the tab
monobooleanUse monospace font for the label