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
