Tabs

Tabs switch between the sections of one page, each with its own content: a channel's chat, tasks and files, for example. The selected tab is a yellow sticker, the same "you are here" as a sidebar row or a segmented control. When the tabs don't fit, the row scrolls sideways.

跟随页面浅色深色并排

When to use

A place with several kinds of content, such as a channel, shows them as one row of sticker tabs under its header (Navigation).

Anatomy

• Tabs: the root. It holds the selected value and the placement.
• TabsList: the row of tabs.
• TabsTab: one tab, with an optional icon before a TabsLabel.
• TabsPanel: the content of one tab.
• SortableTabsList and SortableTabsTab: a row whose tabs people can reorder by dragging. useOrderedTabs restores a saved order.

Variants

The sticker tab is the default, and the one the product ships: a selected tab says "you are here", like a selected sidebar row or segment, so it takes the same yellow sticker (Navigation). The underline stays a variant. placement puts the row on the top (the default), bottom, left or right of the panels.

Behavior

• When the tabs don't fit, the row scrolls on its own. Tabs never wrap onto a second line and never shrink their text.
• The row shows no scrollbar, and a vertical mouse wheel scrolls it sideways.
• The side that hides tabs fades out over 32px.
• The selected tab always scrolls into view.

A tab's own controls

When a tab's content has controls of its own (a view switch, filters, search, a sort), they go in one toolbar row at the top of the tab's content, under the tabs. Every tab with controls uses the same row, the one the Tasks tab draws (TasksPanelToolbar), so a person who has learned one tab knows where to look in the next:

• The row has its own height and padding, the content margin at its sides and a line-seam below it, and it stays pinned while the content scrolls under it. Content never starts flush under the row, and never scrolls up against the tabs.
• Filters and search start at the row's left; a SegmentedControl that switches the view goes at its right end. A view switch on the left would sit right under the selected tab, and two yellow stickers stacked one above the other read as the same level.
• A tab with no controls has no row.

Content

• Label tabs with 1 or 2 words in Title Case: Chat, Tasks, Files (Typography).
• Put a count in its own Space Mono element after the label, never in the label's text.

Accessibility

• Tabs wraps the Base UI Tabs, which provides the tab list, tab and panel semantics and the arrow keys.
• Name the TabsList after the place it belongs to: aria-label="launch-week".
• Give every icon-only tab an aria-label.
• Sortable tabs are reordered with a pointer or by touch; there is no keyboard reordering.

Rules

• Use one row of tabs per screen.
• Make a sticker tab 32px high, with a 44px hit area and 8px of row above and below it, so the selected sticker sits as far from the line above as from the line below. Its width follows its label, and it has no track behind it.
• Make an underline tab 44px high, 20px from the next, with text only.
• Draw a line-seam under the row in both variants. When you change the size of the text or the row, check that the selected tab's space above and below is still equal.
• Start the first sticker on the content's edge, the same margin as the panel header's first element (Page structure). In dark mode the selected sticker has the die-cut edge like every sticker, so it lines up with the avatar in the header (Dark mode).