Components · Data
Tabs
A Tabs/TabList/Tab/TabPanel set with automatic keyboard navigation (arrow keys, Home, End) that flips direction correctly under RTL, plus horizontal and vertical orientations.
Live in all three modes
Day · Night-NVG · Mono: one component, re-themed through the token layer.
Variants & states
- horizontal / vertical orientation
- controlled / uncontrolled value
- disabled tab
Tokens used
--semantic-color-border-default--semantic-color-text-secondary--semantic-color-action-primary--semantic-color-focus-ring
Copy-paste
import { Tabs, TabList, Tab, TabPanel } from 'operator-components';
<Tabs defaultValue="overview">
<TabList>
<Tab value="overview">Overview</Tab>
<Tab value="log">Log</Tab>
</TabList>
<TabPanel value="overview">Sector status nominal.</TabPanel>
<TabPanel value="log">Last 24h activity.</TabPanel>
</Tabs>Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)