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 fromRadix 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 fromRadix UI Tabs List

Renders the container that lays out the tab triggers.

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

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.

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