Tabs

Interactive

See Tabs in Storybook for every variant, with live controls.

Switches between sections of a page. For filters and view modes, use SegmentedControl.

import { Tabs } from "@kairosis/eidos";

<Tabs
  tabs={[
    { value: "runs", label: "Runs", icon: "play", count: 12 },
    { value: "sources", label: "Sources", icon: "database", count: 3 },
  ]}
  value={tab}
  onChange={setTab}
/>;

Props

Prop	Type	Default	Description
tabs	(string | TabDef)[]	—	Required. A bare string is shorthand for { value, label }
value	string	—	Required. Selected tab
onChange	(value: string) => void	—
size	"sm" | "md"	"md"	32 or 40px

TabDef is { value, label, icon?, count?, panelId? } — count renders as a mono pill that recolours when the tab is selected. panelId wires up aria-controls to your panel element.

Keyboard

Follows the WAI-ARIA tabs pattern: the tablist is a single tab stop (roving tabindex), and ←/→ move between tabs, wrapping at both ends. Home/End jump to the first and last. Selection follows focus.

Guidelines

• Tabs render the tablist only. You render the panel — Tabs doesn't own or hide your content. Give your panel an id and pass it as panelId so the two are linked for assistive tech.
• The selected tab is marked by a 2px primary underline that sits on the tablist's bottom border.
• Use count to expose volume without making people click through to find out.
• Sentence case labels.