STRATA

Components / Tabs

Tabs

Switching between peer views inside one surface: Live Posts and Schedule, Preview and Details. For route-linked navigation use NavTabs.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@layers/ui/tabs'

Rendered stock

House rules

  • Tabs is always the segmented (pill) control — there is no line/underline variant. The underline tab style is reserved for NavTabs; if you want an underline, you are doing route-linked navigation, so reach for NavTabs.
  • TabsList has a custom size variant: "default" is 36px and "sm" is 32px. Toolbars use size="sm" like every 32px toolbar control.
  • View toggles use text labels, not icons, when the distinction is not obvious from an icon alone.
  • Tabs is for in-place view switching; tabs that navigate routes are NavTabs.
  • TabsTrigger takes a badge prop — the same count pill as a NavTab badge, and the same contract: it carries a queue needing USER ACTION and nothing else. Omit it (never pass 0) when there is nothing to act on.