Skip to content
Related Articles

Related Articles

ReactJS MDBootstrap Badges Component

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 04 Jan, 2022

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.

Project Structure

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:

MDBootstrap Badges

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

Index.css




#gfg{
  margin: 40px;
}

Output:

MDBootstrap Badges

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!