Tabs

Four models are available to this workspace.

import { Tab, Tabs, TabsList, TabsPanel } from "@arcadia/ui";

<Tabs defaultValue="models" {...sx("cmp-panel", cmp.panel)}>
  <TabsList>
    <Tab value="general">General</Tab>
    <Tab value="models">Models</Tab>
    <Tab value="shortcuts">Shortcuts</Tab>
    <Tab value="beta" disabled>Beta</Tab>
  </TabsList>
  <TabsPanel value="general" {...sx("cmp-panel-body", cmp.panelBody)}>
    Theme, language and start-up.
  </TabsPanel>
  <TabsPanel value="models" {...sx("cmp-panel-body", cmp.panelBody)}>
    Four models are available to this workspace.
  </TabsPanel>
  <TabsPanel value="shortcuts" {...sx("cmp-panel-body", cmp.panelBody)}>
    Every shortcut, searchable.
  </TabsPanel>
</Tabs>

TSX

import { Tab, Tabs, TabsList, TabsPanel } from "@arcadia/ui";

<Tabs defaultValue="changes">
  <TabsList appearance="pill" size="sm">
    <Tab value="changes" icon="file-diff">Changes</Tab>
    <Tab value="todos" icon="todo">To-dos</Tab>
  </TabsList>
  <TabsPanel value="changes">…</TabsPanel>
  <TabsPanel value="todos">…</TabsPanel>
</Tabs>

Three looks, one behaviour. underline, text tabs over the umbra line with a 1px indicator that moves on the morph spring, for settings and panels. segmented, the Segmented Control's thumb, for view switches. pill, the active tab a fill-3 pill switched instantly, for compact panel headers. A tab's icon draws its filled form while the tab is selected.

Tabs or a Segmented Control? Tabs switch between panels of content and carry the tab roles. To pick a value, such as a setting or a filter, with no panel of its own, use a Segmented Control.

Examples

Panel header

pill at sm, with icons, heading a side panel.

3 files changed.

import { Tab, Tabs, TabsList, TabsPanel } from "@arcadia/ui";

<Tabs defaultValue="changes" {...sx("cmp-panel", cmp.panel)}>
  <TabsList appearance="pill" size="sm">
    <Tab value="changes" icon="file-diff">Changes</Tab>
    <Tab value="todos" icon="todo">To-dos</Tab>
    <Tab value="terminal" icon="terminal">Terminal</Tab>
  </TabsList>
  <TabsPanel value="changes" {...sx("cmp-panel-body", cmp.panelBody)}>3 files changed.</TabsPanel>
  <TabsPanel value="todos" {...sx("cmp-panel-body", cmp.panelBody)}>4 of 4 to-dos done.</TabsPanel>
  <TabsPanel value="terminal" {...sx("cmp-panel-body", cmp.panelBody)}>No running processes.</TabsPanel>
</Tabs>

Segmented

The Segmented Control's look, when each option still has its own panel.

import { Tab, Tabs, TabsList } from "@arcadia/ui";

<Tabs defaultValue="preview">
  <TabsList appearance="segmented">
    <Tab value="preview">Preview</Tab>
    <Tab value="code">Code</Tab>
    <Tab value="diff">Diff</Tab>
  </TabsList>
</Tabs>

rootStyle takes where the strip sits (margins, self-alignment, flex and grid placement, size bounds) and the knobs below, each a token of its kind. A colour, a raw length or any other property is a type error: a look that comes up twice becomes a variant.

TSX

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  // roomier tabs on a wide panel
  roomy: { "--tab-px": "var(--space-2)", "--tabs-gap": "var(--space-2)" },
});

<TabsList rootStyle={styles.roomy}>…</TabsList>

Takes	Default	Sets
`Ref<Control>`	`var(--control-lg)`	Tab height.
`Ref<Space>`	`var(--space-1-5)`	Tab inline padding (an underline's first label hangs it outside).
`Ref<Space>`	`var(--space-1)`	Gap between tabs.
`Paint`	`var(--text-3)`	Tab label colour at rest.
`Paint`	`var(--text-2)`	Tab label colour under the pointer.
`Paint`	`var(--text-1)`	The current tab's label colour.
`Paint`	`var(--text-4)`	A disabled tab's label colour (the current tab keeps its own).

The knobs go on TabsList and every tab inherits them. A disabled tab drops to --tab-fg-disabled; the current tab keeps its colour. A segmented strip takes the Segmented Control's knobs instead.

Usage

Examples

Panel header

Segmented

Matrix

Customising

Accessibility

API reference

TabsList6 props

Tab4 props

TabsPanel2 props