ts
| 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. |
| 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={{}}. |
| Prop | Type | Description |
|---|---|---|
valuerequired | string | The currently selected tab value. |
onChangerequired | (value: string) => void | Callback fired when a tab is selected. |
childrenrequired | ReactNode | XDSTab and XDSTabMenu items to render inside the nav. |
size | 'sm' | 'md' | 'lg' (default: 'md') | Size variant applied to all child tabs. |
hasDivider | boolean (default: false) | Whether to show a bottom border divider under the tab list. |
xstyle | StyleXStyles | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}. |
| Prop | Type | Description |
|---|---|---|
labelrequired | string | Label for the trigger button (shown when no option is selected) and the dropdown heading divider. |
optionsrequired | XDSTabMenuOption[] | Array of menu options rendered in the dropdown. |