Skip to content
Related Articles

Related Articles

Improve Article

ReactJS Reactstrap Badges Component

  • Last Updated : 22 Jul, 2021
Geek Week

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;

Output: 

Reference:  https://reactstrap.github.io/components/badge/




My Personal Notes arrow_drop_up
Recommended Articles
Page :