ReactJS Reactstrap Badges Component

Last Updated : 22 Jul, 2021

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>GeeksforGeeks <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>GeeksforGeeks <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;