Page Tabs

Browser-style tab navigation with close buttons, separators between tabs, and an optional add-tab button. Use for multi-document interfaces where each tab is a closeable, openable thing — open files, editor buffers, or workspace documents. Reach for Tabs instead when switching between fixed views of the same screen (settings sections, panel modes) — those tabs are not closeable and the set is static. Set stretch to fill the bar width (few, equal tabs); leave it off for compact left-aligned tabs that scroll horizontally as documents accumulate.

Default with add button

Content for: Dashboard

<PageTabBar showAddButton onAddTab={() => addTab()}>
  <PageTab active onClick={() => ...} onClose={() => ...}>
    Dashboard
  </PageTab>
  <PageTab onClick={() => ...} onClose={() => ...}>
    Analytics
  </PageTab>
  <PageTab onClick={() => ...} onClose={() => ...}>
    Settings
  </PageTab>
</PageTabBar>

Stretched

<PageTabBar stretch>
  <PageTab active onClose={() => ...}>Dashboard</PageTab>
  <PageTab onClose={() => ...}>Analytics</PageTab>
  <PageTab onClose={() => ...}>Settings</PageTab>
</PageTabBar>

Props

Component	Props
PageTabBar	showAddButton, onAddTab, stretch, className
PageTab	active, onClick, onClose (omit to hide ×), className

Source

packages/react/src/components/page-tabs.tsx · Figma node 4843:34546