Components

Tabs

Tabs organise content into separate views, allowing the user to switch between them.

Stable

Tab Content 1

Anatomy

import {Tabs} from '@staffbase/design';

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

Inherits props fromBase UI Tabs Root

Groups all parts of the tabs and manages which tab is selected.

Name	Type	Description
`value`	`string`	The value of the selected tab when controlled. Use together with onValueChange.
`defaultValue`	`string`	The value of the tab selected when initially rendered. Use when you do not need to control the selected tab.
`onValueChange`	`(value: string) => void`	Callback fired when the selected tab changes.
`children`	`ReactNode`	The tab list and content panels.

Inherits props fromBase UI Tabs List

Renders the container that lays out the tab triggers.

Name	Type	Description
`children`	`ReactNode`	The tab triggers.

Inherits props fromBase UI Tabs Tab

Renders the button that activates its associated content panel.

Name	Type	Description
`value`	`string`	A unique value that associates the trigger with a content panel.
`children`	`ReactNode`	The label shown inside the tab.

Inherits props fromBase UI Tabs Panel

Renders the panel shown when its associated trigger is selected.

Name	Type	Description
`value`	`string`	A unique value that associates the panel with its trigger.
`children`	`ReactNode`	The content shown when the tab is selected.

Inbox content

Use Tabs to organize closely related content into distinct views that the user needs one at a time, not simultaneously.
Use Tabs when the user switches between a small, fixed set of views within the same page context — typically 2–7 tabs.
Use Tabs to group parallel categories that share the same structural layout, such as Inbox, Drafts, and Alerts.

Don’t use Tabs to compare information across two groups — the user would have to click back and forth to complete the comparison; use a side-by-side layout or a table instead.
Don’t use Tabs for sequential steps or multi-stage workflows — use a stepper or wizard instead.
Don’t disable Tabs.Trigger items — disabled interactive elements are a poor accessibility pattern, even when paired with tooltips; if a section is unavailable, explain it through content or remove the tab entirely.

Compose a tab group from Tabs.Root, Tabs.List, Tabs.Trigger, and Tabs.Content.
Pair every Tabs.Trigger with a Tabs.Content that shares the same value.
One tab is always active — there is no state where all tabs are deselected simultaneously.

Tab Content 1

Use an inline Badge inside a Tabs.Trigger to surface counts or alerts relevant to that tab.
Follow Badge content guidelines for value formatting and variant choice.

Inbox content

Don’t disable Tabs.Trigger items — disabled elements are a poor accessibility pattern; indicate unavailability through content instead.
Arrow keys navigate between triggers within Tabs.List; keyboard behavior is handled automatically by the component.
Each trigger is programmatically linked to its content panel via ARIA attributes.

Title Case labels.

Don't

Lowercase labels.

All nouns in the same tab group.

Don't

Mixed nouns and verbs in the same tab group.