React-Bootstrap Badge Component

Namachila October 13, 2025

0 1 2 minutes read

React-Bootstrap is a front-end framework that was designed keeping react in mind. Bootstrap was re-built and revamped for React, hence it is known as React-Bootstrap.

Badges are used for indication purposes like to show the notifications number, and we can also display messages using variants that come with this framework.

Badge props:

pill: It is used to make the more rounded badges and adds some horizontal padding.
variant: It is used to add different themes and visual styles for badges.
variant: It is used for visual styling.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap css.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required modules using the following command:
```
npm install react-bootstrap bootstrap
```

Step 4: Add the below line in index.js file:

import 'bootstrap/dist/css/bootstrap.css';

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from "react"; 
import Badge from "react-bootstrap/Badge"; 
import Button from "react-bootstrap/Button"; 
  
export default function BadgeExample() { 
  return ( 
    <> 
      <div> 
        <h3>Notification Indication Badge with multiple variants</h3> 
        <Button variant="secondary"> 
          Primary variant  
          <Badge variant="primary"> 
            10 
          </Badge> 
        </Button>{" "} 
        <Button variant="secondary"> 
          Secondary variant  
          <Badge variant="secondary"> 
            10 
          </Badge> 
        </Button>{" "} 
        <Button variant="secondary"> 
          Success variant  
          <Badge variant="success"> 
            10 
          </Badge> 
        </Button>{" "} 
        <Button variant="secondary"> 
          Danger variant  
          <Badge variant="danger"> 
            10 
          </Badge> 
        </Button>{" "} 
        <Button variant="secondary"> 
          Warning variant  
          <Badge variant="warning"> 
            10 
          </Badge> 
        </Button>{" "} 
        <Button variant="secondary"> 
          Light variant  
          <Badge variant="light"> 
            10 
          </Badge> 
        </Button>{" "} 
      </div> 
      <br /> 
  
      <div> 
        <h3>Pill Type Badge with multiple variants</h3> 
        <Badge pill variant="primary"> 
          Primary pill variant 
        </Badge>{" "} 
        <Badge pill variant="secondary"> 
          Secondary pill variant 
        </Badge>{" "} 
        <Badge pill variant="success"> 
          Success pill variant 
        </Badge>{" "} 
        <Badge pill variant="danger"> 
          Danger pill variant 
        </Badge>{" "} 
        <Badge pill variant="warning"> 
          Warning pill variant 
        </Badge>{" "} 
        <Badge pill variant="info"> 
          Info pill variant 
        </Badge>{" "} 
        <Badge pill variant="light"> 
          Light pill variant 
        </Badge>{" "} 
        <Badge pill variant="dark"> 
          Dark pill variant 
        </Badge> 
      </div> 
      <br /> 
      <div> 
        <h3>Contextual Badge with multiple variants</h3> 
        <Badge variant="primary"> 
          Primary variant</Badge>{" "} 
        <Badge variant="secondary"> 
          Secondary variant</Badge>{" "} 
        <Badge variant="success"> 
          Success variant</Badge>{" "} 
        <Badge variant="danger"> 
          Danger variant</Badge>{" "} 
        <Badge variant="warning"> 
          Warning variant</Badge>{" "} 
        <Badge variant="info"> 
          Info variant</Badge>{" "} 
        <Badge variant="light"> 
          Light variant</Badge>{" "} 
        <Badge variant="dark"> 
          Dark variant </Badge> 
      </div> 
      <br /> 
      <div> 
        <h3>Use of badges in normal text</h3> 
        <h5> 
          Heading  
          <Badge variant="primary">  
            primary badge variant !!! 
          </Badge> 
        </h5> 
        <h5> 
          Heading  
          <Badge variant="secondary"> 
            secondary badge variant 
          </Badge> 
        </h5> 
        <h5> 
          Heading  
          <Badge variant="success"> 
            success badge variant 
          </Badge> 
        </h5> 
        <h5> 
          Heading  
          <Badge variant="danger"> 
            danger badge variant 
          </Badge> 
        </h5> 
        <h5> 
          Heading  
          <Badge variant="warning"> 
            warning badge variant 
          </Badge> 
        </h5> 
        <h5> 
          Heading  
          <Badge variant="info"> 
            info badge variant 
          </Badge> 
        </h5> 
        <h5> 
          Heading  
          <Badge variant="dark"> 
            dark badge variant 
          </Badge> 
        </h5> 
      </div> 
    </> 
  ); 
} 

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Reference: https://react-bootstrap.netlify.app/components/badge/#badges

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!