Page Tabs

Browser-style tab navigation with close buttons, separators between tabs, and an optional add-tab button. Use for multi-page/multi-document interfaces.

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