React-Bootstrap Button Component

Last Updated : 07 Mar, 2024

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>
    </>
  );
}