Tab bar

TabBar is for navigating between sections of a page — Settings tabs, profile-page sections, content-filter tabs. For switching content in-place inside a single panel, use SegmentedControl.

<TabBar items={...} variant="tab" />

<SegmentedControl items={...} />

<Breadcrumb items={...} />

Use it for

• Settings page sub-section navigation
• Profile page sections (Overview / Activity / Connections)
• Content filter tabs (All / Active / Archived)
• Any flat sibling-section navigation where each tab corresponds to a distinct view

Import

import { TabBar } from '@brikdesigns/bds';

Variants

tab — underline (default for app navigation)

<TabBar
  variant="tab"
  items={[
    { label: 'Overview', active: true, onClick: () => setTab('overview') },
    { label: 'Billing', onClick: () => setTab('billing') },
    { label: 'Security', onClick: () => setTab('security') },
  ]}
/>

text — minimal

Plain labels with brand color for active tab. Use in tight headers where the underline would crowd.

<TabBar variant="text" items={items} />

box — filled

Filled background for active, bordered for inactive. Use for content filters where the active state needs strong visual weight.

<TabBar variant="box" items={items} />

On-color (dark backgrounds)

onColor switches text and border colors to on-color-dark tokens for legibility against brand or dark surfaces.

<TabBar variant="text" onColor items={items} />

Disabled tabs

Set disabled: true on individual items.

<TabBar items={[
  { label: 'Overview', active: true },
  { label: 'Billing' },
  { label: 'Security', disabled: true },
]} />

When not to use

• Don't use TabBar for in-panel content switching. Use SegmentedControl — different visual treatment, different navigation model.
• Don't use TabBar for hierarchical navigation. Use Breadcrumb.
• Don't put more than ~6 tabs in a row. Long tab strips wrap awkwardly. Switch to SidebarNavigation for vertical nav with more items.

Accessibility

• Renders a <div role="tablist"> with each tab as <button role="tab">.
• Active tab carries aria-selected="true".
• Keyboard arrow keys move focus between tabs (left/right or up/down per orientation).
• Disabled tabs use aria-disabled and skip in keyboard nav.

API

Plus standard <div> HTML attributes.

TabItem

interface TabItem {
  label: ReactNode;
  active?: boolean;
  disabled?: boolean;
  onClick?: () => void;
}

Related

• SegmentedControl — in-panel content switcher
• Breadcrumb — hierarchical position
• SidebarNavigation — vertical nav for many items
• Storybook playground