CODEWITHSUNDEEP
reactjsmaterial-ui
mraty
mraty

Reputation: 667

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

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).

Upvotes: 30

Views: 15817

Answers (1)

Ogglas
Ogglas

Reputation: 70194

You can do it like this:

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

Upvotes: 60

Related Questions