CODEWITHSUNDEEP
reactjsreact-bootstrap
Q8root
Q8root

Reputation: 1385

Adding badge beside react-bootstrap <Tab> title

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.

Upvotes: 3

Views: 2043

Answers (1)

Arthur Rubens
Arthur Rubens

Reputation: 4706

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

Upvotes: 6

Related Questions