Adding badge beside react-bootstrap <Tab> title

user_2873860 0
Viewed 1234

I am using react-bootstrap tab component:

How can i add badge beside the Tab title (Messages)

<span class="badge badge-success">20</span>


<Tabs
      id="controlled-tab-example"
      activeKey={key}
      onSelect={(k) => setKey(k)}
    >
      <Tab eventKey="home" title="Home">
        <Home/>
      </Tab>
      <Tab eventKey="profile" title="Profile">
       <Profile/>
      </Tab>
      <Tab eventKey="contact" title="Messages" disabled>
        <Messages/>
      </Tab>
    </Tabs>

So i can show for user how many un-read messages he have.

react-bootstrap reactjs
1 Answers

Something like this:

import React from "react";
import ReactDOM from "react-dom";
import { Tabs, Tab, Badge } from "react-bootstrap";
import Lorem from "react-lorem-component";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="App">
      <Tabs fill defaultActiveKey="home" id="uncontrolled-tab-example">
        <Tab
          eventKey="home"
          title={
            <React.Fragment>
              Home
              <Badge variant='light'>9</Badge>
            </React.Fragment>
          }
          mountOnEnter
          unmountOnExit={false}
        >
          <Lorem count="2"/>
        </Tab>
        <Tab
          eventKey="profile"
          title="Profile"
          mountOnEnter
          unmountOnExit={false}
        >
          <Lorem count="2"/>
        </Tab>
      </Tabs>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
user_101963010
Related