Skip to main content

Navigation Tabs

Default​

Navigation tabs are useful for having buttons to navigate between different views.

http://localhost:3000
function NavigationTabsDemo() {
  const tabData: NavigationTab = ['creation', 'tracking', 'quality'].map((name) => {
    return {
      label: name,
      toolTip: name,
      onClick: () => {
        console.log(name);
      },
    };
  });
  return <NavigationTabs tabs={tabData} />;
}

With Counter Button Tabs​

We can show a count of result for a particular button by passing count property.

http://localhost:3000
function NavigationTabsDemo() {
  const style = {
    tabsStyle: {
      backgroundColor: '$palette-grey-200',
      borderColor: '$palette-grey-200',
      borderRadius: '100px',
      gap: '10px',
      height: '40px',
      maxHeight: 'auto',
      padding: '3px',
      width: 'max-content',
    },
    buttonCss: {
      color: '$palette-text-primary',
      height: '32px',
      '&:hover': { backgroundColor: '$palette-grey-300' },
      minWidth: 'none',
      '> span > div > span': { color: '$palette-white' },
    },
    counterCss: {
      h: '20px',
      px: '8px',
    },
  };
  const tabData: NavigationTab = ['creation', 'tracking', 'quality'].map((name) => {
    return {
      count: Math.floor(Math.random() * 100),
      label: name,
      toolTip: name,
      onClick: () => {
        console.log(name);
      },
    };
  });

  return (
    <NavigationTabs
      tabs={tabData}
      css={style.tabsStyle}
      buttonCss={style.buttonCss}
      activeButtonCss={{
        backgroundColor: '$palette-white !important',
      }}
      counterCss={style.counterCss}
      activeCountColor="blue"
    />
  );
}

Props​

as?The root element to be rendered
as?The root element to be rendered