Tab Strip
A scrolling row of pill tabs for open items, like the artifacts beside a chat, that people can switch between, close and add to.
Closable tabs
A tab is built from four parts. TabStripItem is the slot in the strip. TabStripTab is the pill. TabStripTrigger is the button that selects the tab, and TabStripClose is a sibling of the trigger so the two buttons never nest. Pass the selected tab's id to activeTabId on TabStrip, and isActive to each part of that tab. In browsers that support CSS anchor positioning, the selected background slides to the newly selected tab.
The close button shows on hover and focus, and always on the selected tab. Clicking it calls onClose without selecting the tab. Give square controls beside the strip, like the new tab button, TAB_STRIP_CONTROL_CLASS so they match the pills.
Without close buttons
Leave out TabStripClose when the set of tabs is fixed. Use aria-controls on TabStripTrigger to point at the panel it shows.
Overlay close button
With overlay, the close button floats over the end of the label instead of reserving space, and shows only on hover and focus, including on the selected tab. Tabs keep the same width whether or not they can close.
Overflow and keyboard
The strip scrolls sideways when its tabs do not fit, and fades its edges. When activeTabId changes, the selected tab scrolls into view. TabStripLabel truncates long titles and shows the full title in a native tooltip.
The strip is one Tab stop: Tab moves focus to the selected tab, the left and right arrow keys move between tabs and wrap at the ends, and Home and End jump to the first and last tab. Enter or Space selects the focused tab.
TabStrip Properties
Accessible name of the tab list. Pass this or aria-labelledby.
Id of the selected tab. It scrolls into view when this changes, and becomes the strip's Tab stop again.
Additional classes for the tab list. Other div props are passed through.
TabStripItem Properties
Id of the tab, matched against activeTabId.
Whether this is the selected tab.
Additional classes for the slot. Other div props are passed through.
TabStripTab Properties
Applies the selected pill style.
Forwarded to the pill, so it can be a context menu or drag target.
Additional classes for the pill, such as a smaller max width. Other div props are passed through.
TabStripTrigger Properties
Sets aria-selected.
Renders the child element, such as a link, as the trigger instead of a button.
Default: false
Additional classes for the trigger. Other button props are passed through.
TabStripLabel Properties
Tab title. Truncates to one line, with the full title in a native tooltip.
Additional classes for the label.
TabStripClose Properties
Accessible name and tooltip, such as Close Visibility report.
Called on click, without selecting the tab.
Floats the button over the end of the label on hover and focus instead of reserving space.
Default: false