Tabs & menus

Tabs are a segmented control: a filled 32px track, and the active segment lifted to the page colour with one soft shadow. Segments fill the track’s inner height exactly, so they hug rather than float.

Tabs.folio-tabs / .folio-tab

The summary a merchant looks at every day.

tsx

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
</Tabs>

// Plain HTML: mark the active segment with aria-selected="true"
<div class="folio-tabs" role="tablist">
  <button class="folio-tab" role="tab" aria-selected="true">Overview</button>
  <button class="folio-tab" role="tab">Activity</button>
</div>

Menus

Linear proportions: 32px rows of 13px medium text, 8px corners inside a 12px surface with 4px padding (so the corners stay concentric), a 2px breath between rows, icons dimmed by opacity so a destructive item’s glyph goes soft red rather than grey. The surface sits on --dropdown, a step off the popover fill.

Dropdown menu.folio-menu / .folio-menu-item

tsx

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="secondary" size="icon" aria-label="More"><DotsSolid /></Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem onSelect={resend}><RefreshSolid />Re-send</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive" onSelect={revoke}><TrashSolid />Revoke</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

The header bar’s overflow menu is the same component, rendered by the dashboard from your titleBar({ menu }) declaration. Tooltips: 12px on --inverse, 8px radius, for icon-only controls and nothing else.