React-Bootstrap Badge Component - GeeksforGeeks

25 Mar, 2021
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 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 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 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';
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
React-Bootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript