React-Bootstrap Button Component

Introduction: React-Bootstrap is a front-end framework that was designed keeping react in mind. Bootstrap was re-built and revamped for React, hence it is known as React-Bootstrap. Buttons are used to perform actions on the website and they play a crucial role in the front-end part.

Buttons props:

• variant: It is used to add different themes and visual styles for badges.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
• disabled: It is used to disable buttons.
• active: It is used to manually set the button inactive state.
• size: It is used to specify the size of the button.
• as: Used as a custom element for the descriptive purpose for this composite.
• type: Used to define the functionality of the button.
• name: It is used to name each button.
• value: It is used to give specific values to each button.
• onChange: The callback function is fired when a button is pressed depending on the type of button type. 

ToggleButtonGroup props:

• name :  It is used to name each button.
• onChange: The callback function is fired when a button is pressed depending on the type of button type. 
• size: It is used to specify the size of the button.
• type: Used to define the functionality of the button like radio or checkbox.
• value: It is used to give specific values to each button.
• vertical: It is used to style the buttons in a vertical way.

ToggleButton props:

• disabled: It is used to disable both label and input.
• inputRef: A ref is added to <input> element.
• type: Used to define the functionality of the button like radio or checkbox.
• checked: It determines the checked state of the input element which is managed by <ToggleButtonGroup>.
• onChange: The callback function is fired when a button is pressed depending on the type of button type. 
• name: It is used to determine the name of each button.
• value: It is used to give specific values to each button which should be unique for its siblings.

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 modules using the following command.

  npm install react-bootstrap bootstrap

• Step 4: Add the below line in index.js file.

  import 'bootstrap/dist/css/bootstrap.css';

Project Structure: It will look like the following.

Approach:

• First, install the react-bootstrap using the above-mentioned command.
• Now in the file app.js write the code following the below instructions.
• After completing the installation, Import ‘ButtonGroup’ from ‘react-bootstrap/Button-Group’ in that file.
• ButtonGroup is used to group multiple buttons and in order to change the colors of the buttons we can use the “variant” property. Like primary, secondary, and danger.

Example: Now use the below code snippet in that file and export that component so that we can import in index.js for rendering.

App.js

import React from "react";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Button from "react-bootstrap/Button";

export default function ButtonGrouping() {
  return (
    <>
      <h3>Normal Buttons</h3>
      <ButtonGroup aria-label="Basic example">
        <Button variant="primary">
            Primary variant Button
        </Button>
        <Button variant="secondary">
            Secondary variant Button
        </Button>
        <Button variant="danger">
            Danger variant Button
        </Button>
        <Button variant="warning">
            Warning variant Button
        </Button>
        <Button variant="info">
            Info variant Button
        </Button>
        <Button variant="success">
            Success variant Button
        </Button>
        <Button variant="light">
            Light variant Button
        </Button>
        <Button variant="dark">
            Dark variant Button
        </Button>
      </ButtonGroup>

      <br />
      <br />
      <br />

      <h3>Outline Variant Buttons</h3>

      <ButtonGroup>
        <Button variant="outline-primary">
          Primary variant outline Button
        </Button>
        <Button variant="outline-secondary">
            Secondary outline Button
        </Button>
        <Button variant="outline-success">
            Success outline Button
        </Button>
        <Button variant="outline-warning">
            Warning outline Button
        </Button>
        <Button variant="outline-danger">
            Danger outline Button
        </Button>
        <Button variant="outline-info">
            Info outline Button
        </Button>
        <Button variant="outline-dark">
            Dark outline Button
        </Button>
      </ButtonGroup>

      <br />
      <br />
      <br />

      <h3>Size Variant Buttons</h3>

      <ButtonGroup>
        <Button variant="primary" size="lg">
          Large variant primary Button
        </Button>
        <Button variant="secondary" size="sm">
          Small variant secondary Button
        </Button>
      </ButtonGroup>

      <br />
      <br />

      <h3>Disabled Variant Buttons</h3>

      <ButtonGroup>
        <Button variant="primary" size="lg" disabled>
          Disabled Large variant primary Button
        </Button>
        <Button variant="secondary" size="sm" disabled>
          Disabled Small variant secondary Button
        </Button>
      </ButtonGroup>
    </>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.