Skip to main content
Version: Next

Tabs

A tabs component for switching between different views or content sections. Supports multiple tab styles, positions, and sizes.

Live Example​

Loading component...

Try It​

Edit the code below to experiment with the component:

Live Editor
function Demo() {
  return (
    <Tabs
      defaultActiveKey="1"
      items={[
        { key: '1', label: 'Tab 1', children: 'Content of Tab Pane 1' },
        { key: '2', label: 'Tab 2', children: 'Content of Tab Pane 2' },
        { key: '3', label: 'Tab 3', children: 'Content of Tab Pane 3' },
      ]}
    />
  );
}
Result
Loading...

Card Style​

Live Editor
function CardTabs() {
  return (
    <Tabs
      type="card"
      defaultActiveKey="1"
      items={[
        { key: '1', label: 'Dashboards', children: 'View and manage your dashboards.' },
        { key: '2', label: 'Charts', children: 'Browse all saved charts.' },
        { key: '3', label: 'Datasets', children: 'Explore available datasets.' },
      ]}
    />
  );
}
Result
Loading...

Tab Positions​

Live Editor
function TabPositions() {
  const items = [
    { key: '1', label: 'Tab 1', children: 'Content 1' },
    { key: '2', label: 'Tab 2', children: 'Content 2' },
    { key: '3', label: 'Tab 3', children: 'Content 3' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {['top', 'bottom', 'left', 'right'].map(pos => (
        <div key={pos}>
          <h4>{pos}</h4>
          <Tabs tabPosition={pos} defaultActiveKey="1" items={items} />
        </div>
      ))}
    </div>
  );
}
Result
Loading...

With Icons​

Live Editor
function IconTabs() {
  return (
    <Tabs
      defaultActiveKey="1"
      items={[
        { key: '1', label: <><Icons.DashboardOutlined /> Dashboards</>, children: 'Dashboard content here.' },
        { key: '2', label: <><Icons.LineChartOutlined /> Charts</>, children: 'Chart content here.' },
        { key: '3', label: <><Icons.DatabaseOutlined /> Datasets</>, children: 'Dataset content here.' },
        { key: '4', label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, children: 'SQL Lab content here.' },
      ]}
    />
  );
}
Result
Loading...

Props​

PropTypeDefaultDescription
defaultActiveKeystring"1"-
typestring"line"The style of tabs. Options: line, card, editable-card.
tabPositionstring"top"Position of tabs. Options: top, bottom, left, right.
sizestring"middle"Size of the tabs.
animatedbooleantrueWhether to animate tab transitions.
centeredbooleanfalseWhether to center the tabs.
tabBarGutternumber8The gap between tabs.
itemsany[{"key":"1","label":"Tab 1","children":"Content of Tab Pane 1"},{"key":"2","label":"Tab 2","children":"Content of Tab Pane 2"},{"key":"3","label":"Tab 3","children":"Content of Tab Pane 3"}]-

Import​

import Tabs from '@superset/components';
Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.