MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component.
In this article we will know how to use Badges Component in ReactJS MDBootstrap. Badges Component is used to present the text as the badges.
Properties:
- tag: It is used to define tag in a badge.
- className: user can define custom class to a badge.
- pill: Users can define a badge in the form of pill.
- color: It is used to add color to a badge.
- dot: It is used to make a badge as a dot.
- notification: It is used to make a badge as a notification.
Syntax:
<MDBBadge>
GeeksforGeeks
</MDBBadge>
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: Install ReactJS MDBootstrap in your given directory.
npm i mdb-ui-kit
npm i mdb-react-ui-kit
Step 4: Import the element to be used in the project.
import { MDBBadge } from 'mdb-react-ui-kit'
Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Example 1: This is the basic example that shows how to use Badge module.
App.js
import React from 'react' ;
import { MDBBadge } from 'mdb-react-ui-kit' ;
export default function App() {
return (
<div id= 'gfg' >
<br/>
<h1>
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'success' pill>
NEW
</MDBBadge>
</h1>
<h2>
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'danger' pill>
NEW
</MDBBadge>
</h2>
<h3>
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'warning' pill>
NEW
</MDBBadge>
</h3>
<h4>
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'primary' pill>
NEW
</MDBBadge>
</h4>
<h5>
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'secondary' pill>
NEW
</MDBBadge>
</h5>
<h6>
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'info' pill>
NEW
</MDBBadge>
</h6>
</div>
);
}
|
Output:

Example 2: In this example, we have make a badge in a button in a Badge component.
App.js
import React from 'react' ;
import { MDBBadge, MDBBtn } from 'mdb-react-ui-kit' ;
export default function App() {
return (
<div id= 'gfg' >
<MDBBtn color= 'info' size= 'lg' >
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'success' pill>
NEW
</MDBBadge>
</MDBBtn>
<br/>
<br/>
<MDBBtn color= 'primary' size= 'lg' >
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'danger' pill>
NEW
</MDBBadge>
</MDBBtn>
<br/>
<br/>
<MDBBtn color= 'light' size= 'lg' >
GeeksforGeeks
<MDBBadge className= 'ms-2' color= 'dark' pill>
NEW
</MDBBadge>
</MDBBtn>
</div>
);
}
|
Output:

Reference: https://mdbootstrap.com/docs/b5/react/components/badges