Material-UI: Adding Badge to a Tab in material-ui Tabbar (Tabs)

Question

I have Material-UI Tabs component with 5 Tab components as children. I would like to display a Badge on the Tab. Badge would display unread items under each tab.

I have two versions of tab bar. One for desktop with icon and text and one for mobile containing just icon. How could I position Badge so that it places properly on both versions. Also Badge should be visible even if tab is not selected (if I set Badge as a child to a Tab it will be hidden when tab is not selected).

Answer 1

You can do it like this:

<Tab label={<Badge badgeContent={this.state.messageCount} color="primary">
    Messages
</Badge>} value="/messages" />