Add dynamic value beside label in Material UI React Tabs Component

user_16023242 0
Viewed 784

I am creating tabs using material ui and i want to add value beside label (ex: 05 written beside Recommendation label) which will be dynamic in the tabs component just like shown in below image:

enter image description here

Here is my code snippet of Tabs component:

    <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
      <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
         <Tab label="Recommendation" />
         <Tab label="Ongoing" />
         <Tab label="Completed" />
      </Tabs>
   </Box>
material-ui reactjs tabs
1 Answers

One option is to create your own component, pass that in as a the Tab label, and then style it as needed. For example:

const TabWithCount = ({ children, count }) => {
  return (
    <Box sx={{ display: "inline-flex", alignItems: "center" }}>
      <Typography component="div">{children}</Typography>
      {count ? (
        <Typography
          component="div"
          variant="body2"
          sx={{ marginLeft: "0.5rem" }}
        >
          {count}
        </Typography>
      ) : null}
    </Box>
  );
};

...

<Tab
  label={<TabWithCount count="05">Recommendation</TabWithCount>}
/>

I've created a quick (unstyled) example to illustrate the solution: https://codesandbox.io/s/basictabs-material-demo-forked-i9543?file=/demo.js

user_31804890
Related