Tab List @astryx-svelte/core v0.5.2 · 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
Best practices
| Guidance | Practices |
|---|---|
| Do | Keep tab labels short and descriptive so users can quickly scan available sections. |
| Do | Leave overflow handling on: a strip narrower than its tabs scrolls, and the selected tab is kept in view. Use TabMenu when you want a curated group of extra options rather than a scrolling strip. |
| Do | When using hasDivider with action buttons alongside tabs, match the Button size to the TabList size (both md, both sm); the divided tab strip reserves space so tabs and same-size buttons align to a shared baseline above the rail. |
| Do | Reach for role="tablist" when the strip switches panels in place, and give each tab a panelId pointing at the panel it opens: that link is how a screen reader gets from a tab to its content. Leave it off for navigation between views. |
| 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
Tabs that stretch to fill the available width with a bottom divider.
TabList — With Actions
Page header pattern with tabs on the left and action buttons pushed to the right. When hasDivider is true, match the Button size to the TabList size so the tabs and actions align to a shared baseline above the divider.
TabList — With Badge
Tabs with notification badge counts rendered via endContent. Uses error variant for urgent counts and neutral for informational ones.
TabList — With Icons
Tabs with leading icons alongside text labels.
TabList — With Overflow Menu
Tab list with a dropdown menu for additional items that do not fit inline.
TabList — With Status Dot
Tabs with status dot indicators rendered via endContent to show live environment health at a glance.