XDS — Design System

XDSTab@xds/core · TabList

Usage

TabList provides tab-style navigation for organizing content into categorized sections. Use it to let users switch between related views without leaving the page, with overflow items handled by a built-in "more" menu.

Best practices

Guidance	Practices
Do	Keep tab labels short and descriptive so users can quickly scan available sections.
Do	Use XDSTabMenu to group overflow items when horizontal space is limited rather than scrolling tabs off-screen.
Do	When using hasDivider with action buttons alongside tabs, use a smaller button size (sm) so the actions don’t overpower the tab row.
Don't	Use tabs for sequential steps or workflows — use a stepper or wizard pattern instead.
Don't	Place more than 6–8 visible tabs before the overflow menu — prioritize the most important categories.
Don't	Confuse TabList with XDSSegmentedControl or XDSToggleButton. TabList is for navigation between views. SegmentedControl and ToggleButton are input controls — SegmentedControl always has exactly one selected option, while ToggleButton can be toggled on or off.

Anatomy

Element		Description
Left Content		Most important area; hugs content width.
Center-Fill Content		Stretches to fill available space.
Right Content		Hugs content width.

Import

ts
import {XDSTab} from '@xds/core/TabList'

Props

Prop	Type	Description
valuerequired	string	Unique value for this tab, matched against XDSTabListContext.value.
labelrequired	string	Visible label text for this tab.
href	string	URL to navigate to; when provided, the tab renders as an anchor element.
as	XDSLinkComponentType	Custom component to render instead of <a> for link tabs. Overrides the XDSLinkProvider default. Only applies when href is provided.
icon	ReactNode	Icon element shown when the tab is not selected.
selectedIcon	ReactNode	Icon element shown when the tab is selected; falls back to icon if not provided.
endContent	ReactNode	Content rendered after the label, such as a badge count or status dot.
xstyle	StyleXStyles	StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}.

Showcase source

tsx
'use client';
import {XDSTabList, XDSTab} from '@xds/core/TabList';
import {XDSBadge} from '@xds/core/Badge';
export default function TabShowcase() {
  return (
    <XDSTabList value="inbox" onChange={() => {}}>
      <XDSTab
        value="inbox"
        label="Inbox"
        endContent={<XDSBadge label="3" variant="info" />}
      />
    </XDSTabList>
  );
}