Reactstrap is a 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 Reactstrap. Badges are used for creating labels. Badges scale to match the size of the immediate parent element by using relative font sizing.
Syntax:
<badge>Content</badge>
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 module using the following command:
npm install reactstrap bootstrap
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 component.
App.js
import React from 'react'; import { Badge } from 'reactstrap'; const Example = (props) => { return ( <div> <h1>neveropen <Badge color="secondary">10</Badge></h1> </div> ); } export default Example; |
Output:
Example 2: In this example, we will make pill type badges.
App.js
import React from 'react'; import { Badge } from 'reactstrap'; const Example = (props) => { return ( <div> <h1>neveropen <Badge color="secondary" pill>10</Badge></h1> </div> ); } export default Example; |
Output:
Example 3: In this example, we are using badge which shows on hovering effect.
- App.js
Javascript
import React from 'react'; import { Badge, Button } from 'reactstrap'; const gfg = (props) => { return ( <div> <br/> <Button color="primary" outline> GeeksforGeek <Badge color="secondary" pill>reactstrap</Badge> </Button> </div> ); }; export default gfg; |
Output:
Reference: https://reactstrap.github.io/components/badge/
