Tabs

Usage

Tabs is a controlled component — pair activeId with local state and wire onChange to it. Each item's panel renders inside the active tabpanel. Keyboard navigation (ArrowLeft/ArrowRight, Home/End) and roving tabindex are built in for state mode only — the default variant="state".

variant="href" is link-driven — no arrows, no tabpanel, no roving tabindex. Each href item is a plain anchor in the normal tab order; each href-less item is a button that calls onChange. Use it for URL-driven sub-navigation, not for swapping in-page content panels.

import { Tabs } from '@epasslive/design-system'

// state mode (default) — controlled, with an inline tabpanel
const [activeId, setActiveId] = useState('overview')

<Tabs
  ariaLabel="Event information"
  activeId={activeId}
  onChange={setActiveId}
  items={[
    { id: 'overview', label: 'Overview', panel: <p>Line-up and venue info.</p> },
    { id: 'tickets', label: 'Tickets', badge: 3, panel: <p>3 tiers on sale.</p> },
  ]}
/>

// href mode — link-driven strip (former TabsTrigger), no tabpanel
<Tabs
  variant="href"
  appearance="pills"
  ariaLabel="Event sections"
  activeId={activeId}
  onChange={setActiveId}
  items={[
    { id: 'overview', label: 'Overview', href: '/events/42' },
    { id: 'schedule', label: 'Schedule', href: '/events/42/schedule' },
    { id: 'merch', label: 'Merch' }, // no href → button, calls onChange
  ]}
/>

Props