Tabs
Toggle through grouped options with segmented or underline styles
import { Tabs } from "@plexui/ui/components/Tabs";Examples
Overview
variant
orientation
size
Segmented with icons
size
Segmented with badge
size
Underline
size
Underline flush
size
Underline block
size
Underline with icons
size
Underline with badge
size
Vertical segmented
size
Vertical underline
size
Vertical underline with icons
size
Disabled tab
variant
size
Sizing
variant
size
Tabs shares the unified 9-step size scale with Button, Input, Select, and SelectControl.
Migration from SegmentedControl
Tabs replaces and extends SegmentedControl. The old import still works as a backward-compatible alias:
// Old (still works)
import { SegmentedControl } from "@plexui/ui/components/SegmentedControl";
<SegmentedControl.Option value="a">A</SegmentedControl.Option>
// New (recommended)
import { Tabs } from "@plexui/ui/components/Tabs";
<Tabs.Tab value="a">A</Tabs.Tab>Both Tabs.Tab and Tabs.Option are available as sub-components. The SegmentedControl alias defaults to variant="segmented".
Reference
Tabs (root)
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Selected tab value (controlled) |
onChange | (value: string) => void | — | Called when selection changes |
variant | "segmented" | "underline" | "segmented" | Visual style — segmented (background highlight) or underline (line indicator) |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the tab group |
size | ControlSize | "md" | Control height (3xs through 3xl) |
gutterSize | string | — | Horizontal padding of tabs |
pill | boolean | true | Fully rounded control (segmented variant only) |
flush | boolean | false | Text-width indicator, no border, gap spacing (underline variant only) |
block | boolean | false | Full-width control with equal-width tabs |
disabled | boolean | false | Disable all tabs |
aria-label | string | — | Accessible name (required) |
Tabs.Tab
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Tab value |
disabled | boolean | — | Disable this tab |
icon | ReactNode | — | Icon element (sized automatically) |
badge | number | { content: ReactNode; color?: string; variant?: string } | — | Badge/count or custom badge config |
aria-label | string | — | Accessible name (required for icon-only tabs) |