Tab List · Astryx

Tab List@astryxdesign/core v0.1.1 · 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.

ts
import {TabList} from '@astryxdesign/core/TabList'

Best practices

Guidance	Practices
Do	Keep tab labels short and descriptive so users can quickly scan available sections.
Do	Use TabMenu 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 SegmentedControl or ToggleButton. 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.

Examples

Common configurations, variations, and states.

TabList — Fill Layout

Open in Playground

Tabs that stretch to fill the available width with a bottom divider.

TabList — With Actions

Open in Playground

Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, pair with a smaller button size (sm) so actions don’t overpower the tab row.

TabList — With Badge

Open in Playground

Tabs with notification badge counts rendered via endContent. Uses error variant for urgent counts and neutral for informational ones.

TabList — With Icons

Open in Playground

Tabs with leading icons alongside text labels.

TabList — With Overflow Menu

Open in Playground

Tab list with a dropdown menu for additional items that do not fit inline.

TabList — With Status Dot

Open in Playground

Tabs with status dot indicators rendered via endContent to show live environment health at a glance.

Usage

import {TabList} from '@astryxdesign/core/TabList'

Best practices

Guidance	Practices
Do	Keep tab labels short and descriptive so users can quickly scan available sections.
Do	Use TabMenu 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 SegmentedControl or ToggleButton. 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.