Skip to main content

Variable: Tabs

const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<TabRef | undefined>>

Defined in: components/Tabs/index.tsx:225

Component​

Tabs

Description​

A component for displaying content in a tabbed interface.

Param​

props

The component props.

Param​

ref

The forwarded ref.

Returns​

The rendered Tabs component.

Examples​

<Tabs data={[{ name: 'tab1', label: 'Tab 1' }, { name: 'tab2', label: 'Tab 2' }]}>
  <div data-tab="tab1">Content 1</div>
  <div data-tab="tab2">Content 2</div>
</Tabs>
// Controlled scrollspy-style nav: no panels, external state decides `selected`.
<Tabs
  variant="nav"
  navLabel="Sections"
  data={[{ name: 'intro', label: 'Intro' }, { name: 'details', label: 'Details' }]}
  selected={activeSection}
  onChange={scrollToSection}
/>