ReactJS MDBootstrap Badges Component
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> ); } |
Index.css
#gfg{ margin : 40px ; } |
Output:
Reference: https://mdbootstrap.com/docs/b5/react/components/badges