Tabs

Tabs is a stateless component. This means that you will need to provide that stateful wrapper around it. You'll need to provide the activeDataId prop back to the component on each onTabClickAlso, the tab content will need to be swapped out when the active tab changes.

Result

Loading...

Live Editor

function Demo() { const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees" disabled> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, <Tab key="AssetMix" id="AssetMix"> Asset Mix Content </Tab>, <Tab key="AccountHistory" id="AccountHistory"> Account History Content </Tab>, <Tab key="SubAccounts" id="SubAccounts"> Sub-Accounts Content </Tab>, <Tab key="Notes" id="Notes"> Notes Content </Tab>, <Tab key="Retirement" id="Retirement"> Retirement / Investment Content </Tab>, <Tab key="Another" id="Another"> Another Content </Tab>, ]; const tabContent = { Ownership: 'Ownership Content', Fees: 'Fees Content', Realization: 'Realization Content', Holdings: 'Holdings Content', AssetMix: 'Asset Mix Content', AccountHistory: 'Account History Content', SubAccounts: 'Sub-Accounts Content', Notes: 'Notes Content', Retirement: 'Retirement / Investment Content', Another: 'Another Content', }; const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <Tabs id="demo-component-one" tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} > <div style={{ paddingTop: '20px' }}>{tabContent[activeTabId]}</div> </Tabs> ); }

function Demo() {
  const tabsList = [
    <Tab key="Ownership" id="Ownership">
      Ownership Content
    </Tab>,
    <Tab key="Fees" id="Fees" disabled>
      Fees Content
    </Tab>,
    <Tab key="Realization" id="Realization">
      Realization Content
    </Tab>,
    <Tab key="Holdings" id="Holdings">
      Holdings Content
    </Tab>,
    <Tab key="AssetMix" id="AssetMix">
      Asset Mix Content
    </Tab>,
    <Tab key="AccountHistory" id="AccountHistory">
      Account History Content
    </Tab>,
    <Tab key="SubAccounts" id="SubAccounts">
      Sub-Accounts Content
    </Tab>,
    <Tab key="Notes" id="Notes">
      Notes Content
    </Tab>,
    <Tab key="Retirement" id="Retirement">
      Retirement / Investment Content
    </Tab>,
    <Tab key="Another" id="Another">
      Another Content
    </Tab>,
  ];

  const tabContent = {
    Ownership: 'Ownership Content',
    Fees: 'Fees Content',
    Realization: 'Realization Content',
    Holdings: 'Holdings Content',
    AssetMix: 'Asset Mix Content',
    AccountHistory: 'Account History Content',
    SubAccounts: 'Sub-Accounts Content',
    Notes: 'Notes Content',
    Retirement: 'Retirement / Investment Content',
    Another: 'Another Content',
  };

  const [activeTabId, setActiveTabId] = React.useState('Ownership');

  return (
    <Tabs
      id="demo-component-one"
      tabs={tabsList}
      activeTabId={activeTabId}
      onTabClick={(event, id) => {
        setActiveTabId(id);
      }}
    >
      <div style={{ paddingTop: '20px' }}>{tabContent[activeTabId]}</div>
    </Tabs>
  );
}

Variants

Tabs

Tabs will be rendered as a list of underlined elements.

Result

Loading...

Live Editor

const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; function Demo() { const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <Tabs variant="tabs" tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} ></Tabs> ); } render(<Demo />);

const tabsList = [
  <Tab key="Ownership" id="Ownership">
    Ownership Content
  </Tab>,
  <Tab key="Fees" id="Fees">
    Fees Content
  </Tab>,
  <Tab key="Realization" id="Realization">
    Realization Content
  </Tab>,
  <Tab key="Holdings" id="Holdings">
    Holdings Content
  </Tab>,
];

function Demo() {
  const [activeTabId, setActiveTabId] = React.useState('Ownership');

  return (
    <Tabs
      variant="tabs"
      tabs={tabsList}
      activeTabId={activeTabId}
      onTabClick={(event, id) => {
        setActiveTabId(id);
      }}
    ></Tabs>
  );
}

render(<Demo />);

Underline

Underline will be rendered similiarly to tabs but will have a solid underline across all tabs.

Result

Loading...

Live Editor

const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; function Demo() { const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <Tabs variant="underline" tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} ></Tabs> ); } render(<Demo />);

const tabsList = [
  <Tab key="Ownership" id="Ownership">
    Ownership Content
  </Tab>,
  <Tab key="Fees" id="Fees">
    Fees Content
  </Tab>,
  <Tab key="Realization" id="Realization">
    Realization Content
  </Tab>,
  <Tab key="Holdings" id="Holdings">
    Holdings Content
  </Tab>,
];

function Demo() {
  const [activeTabId, setActiveTabId] = React.useState('Ownership');

  return (
    <Tabs
      variant="underline"
      tabs={tabsList}
      activeTabId={activeTabId}
      onTabClick={(event, id) => {
        setActiveTabId(id);
      }}
    ></Tabs>
  );
}

render(<Demo />);

Pills

Pills will be rendered as a list of rounded elements.

Result

Loading...

Live Editor

const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; function Demo() { const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <Tabs variant="pills" tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} ></Tabs> ); } render(<Demo />);

const tabsList = [
  <Tab key="Ownership" id="Ownership">
    Ownership Content
  </Tab>,
  <Tab key="Fees" id="Fees">
    Fees Content
  </Tab>,
  <Tab key="Realization" id="Realization">
    Realization Content
  </Tab>,
  <Tab key="Holdings" id="Holdings">
    Holdings Content
  </Tab>,
];

function Demo() {
  const [activeTabId, setActiveTabId] = React.useState('Ownership');

  return (
    <Tabs
      variant="pills"
      tabs={tabsList}
      activeTabId={activeTabId}
      onTabClick={(event, id) => {
        setActiveTabId(id);
      }}
    ></Tabs>
  );
}

render(<Demo />);

Vertical

Vertical tabs will always be rendered as pills.

Result

Loading...

Live Editor

const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; function Demo() { const [activeTabId, setActiveTabId] = React.useState('Ownership'); return ( <Tabs vertical tabs={tabsList} activeTabId={activeTabId} onTabClick={(event, id) => { setActiveTabId(id); }} ></Tabs> ); } render(<Demo />);

const tabsList = [
  <Tab key="Ownership" id="Ownership">
    Ownership Content
  </Tab>,
  <Tab key="Fees" id="Fees">
    Fees Content
  </Tab>,
  <Tab key="Realization" id="Realization">
    Realization Content
  </Tab>,
  <Tab key="Holdings" id="Holdings">
    Holdings Content
  </Tab>,
];

function Demo() {
  const [activeTabId, setActiveTabId] = React.useState('Ownership');

  return (
    <Tabs
      vertical
      tabs={tabsList}
      activeTabId={activeTabId}
      onTabClick={(event, id) => {
        setActiveTabId(id);
      }}
    ></Tabs>
  );
}

render(<Demo />);

Sizes

Tabs can be rendered as small, medium (default), or large.

Result

Loading...

Live Editor

const tabsList = [ <Tab key="Ownership" id="Ownership"> Ownership Content </Tab>, <Tab key="Fees" id="Fees"> Fees Content </Tab>, <Tab key="Realization" id="Realization"> Realization Content </Tab>, <Tab key="Holdings" id="Holdings"> Holdings Content </Tab>, ]; render( <> <Tabs size="sm" tabs={tabsList}></Tabs> <Tabs size="md" tabs={tabsList}></Tabs> <Tabs size="lg" tabs={tabsList}></Tabs> </>, );

const tabsList = [
  <Tab key="Ownership" id="Ownership">
    Ownership Content
  </Tab>,
  <Tab key="Fees" id="Fees">
    Fees Content
  </Tab>,
  <Tab key="Realization" id="Realization">
    Realization Content
  </Tab>,
  <Tab key="Holdings" id="Holdings">
    Holdings Content
  </Tab>,
];

render(
  <>
    <Tabs size="sm" tabs={tabsList}></Tabs>
    <Tabs size="md" tabs={tabsList}></Tabs>
    <Tabs size="lg" tabs={tabsList}></Tabs>
  </>,
);

TabNav

The TabNav component is used within Tabs but can also be used by itself to create more customized tabs.

Result

Loading...

Live Editor

function Example() { // An array of tuples, where the first element is the tab id and the second element is the content const tabs = [ ['One', <div id="oneContent">Content of Tab One</div>], ['Two', <div id="twoContent">Content of Tab Two</div>], ]; const [activeTab, setActiveTab] = React.useState('One'); const handleTabClick = (event, tabId) => { setActiveTab(tabId); }; const renderTabContent = () => { let activeTabContent; tabs.forEach(([id, tabPanel]) => { if (id === activeTab) { activeTabContent = tabPanel; } }); return <div style={{ paddingTop: '20px' }}>{activeTabContent}</div>; }; return ( <div> <TabNav activeTabId={activeTab}> {tabs.map(([id]) => ( <Tab id={id} key={id} onClick={(event) => handleTabClick(event, id)}> {id} </Tab> ))} </TabNav> {renderTabContent()} </div> ); }

function Example() {
  // An array of tuples, where the first element is the tab id and the second element is the content
  const tabs = [
    ['One', <div id="oneContent">Content of Tab One</div>],
    ['Two', <div id="twoContent">Content of Tab Two</div>],
  ];

  const [activeTab, setActiveTab] = React.useState('One');

  const handleTabClick = (event, tabId) => {
    setActiveTab(tabId);
  };

  const renderTabContent = () => {
    let activeTabContent;
    tabs.forEach(([id, tabPanel]) => {
      if (id === activeTab) {
        activeTabContent = tabPanel;
      }
    });

    return <div style={{ paddingTop: '20px' }}>{activeTabContent}</div>;
  };

  return (
    <div>
      <TabNav activeTabId={activeTab}>
        {tabs.map(([id]) => (
          <Tab id={id} key={id} onClick={(event) => handleTabClick(event, id)}>
            {id}
          </Tab>
        ))}
      </TabNav>

      {renderTabContent()}
    </div>
  );
}

Best Practices

• Keep tab labels concise, but descriptive.
• Avoid using a group of tabs that will exceed the width of the content area at the smallest desktop resolution.
• Use Title Case for tab text.
• Items in a tab group should be ordered by priority or hierarchy. For longer groups (10 items or greater), consider using alphabetical order.
• Avoid using the same word to start multiple tabs within the group.

Analytics

The Tabs component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Tabs',
	actions: {
		onTabClick: { type: 'TABS_ONTABCLICK', payload: 'Click' },
	},
};

Props

Tabs

TabNav

Tab