Segmented Tabs

Pill-styled tabs where the active trigger fills with a control surface instead of showing an underline. Built on the same Radix primitives as Tabs, so it works as a full tab set or as a standalone controlled view switcher when the panel content is rendered elsewhere.

Basic

A full segmented tab set with content panels.

Topics plotted by visibility and sentiment, so the gaps stand out.

Controlled (list only)

Use value + onValueChange and omit Content when the active view's content is rendered elsewhere, e.g. in a section body separate from the toolbar.

For a toolbar switcher whose content lives outside the control, prefer SegmentedToggleGroup (below). A Radix tablist without matching Content panels tells assistive tech to expect tabpanels that do not exist; the toggle group keeps button/aria-pressed semantics instead.

42.6%

Toggle group (button semantics)

SegmentedToggleGroup has the same pill look but renders a role="group" of toggle buttons with aria-pressed instead of a Radix tablist. Use it for toolbar switchers that swap surrounding content rather than Radix tab panels. Pass an aria-label on the Root to name the group.

Pass href to an item when the selected view lives in the URL. The item renders as a link, so it can open in a new tab. Following the link selects it, so onValueChange does not fire and can be omitted when every item is a link.

Showing topics as a matrix.

SegmentedTabs.Root

value
string

Value of the active tab when controlled

defaultValue
string

Active tab on first render when uncontrolled

onValueChange
(value: string) => void

Called when the active tab changes


SegmentedToggleGroup.Root

valueRequired
string

Value of the selected item

onValueChange
(value: string) => void

Called with the item value when the user selects a different button item

aria-label
string

Accessible name for the group

className
string

Additional classes for the group


SegmentedToggleGroup.Item

valueRequired
string

Value that selects this item

childrenRequired
ReactNode

Item label

href
string

Renders the item as a link to this URL

prefetch
boolean'auto'null

Route prefetch for link items, passed to Next.js Link

className
string

Additional classes for the item