ReactJS MDBootstrap Badges Component

Last Updated : 02 Aug, 2024

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

Index.css

#gfg{
  margin: 40px;
}

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