Skip to content
Related Articles

Related Articles

Improve Article
React-Bootstrap Button Component
  • Last Updated : 17 Jun, 2021

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.

Reference: https://react-bootstrap.netlify.app/components/buttons/#buttons




My Personal Notes arrow_drop_up
Recommended Articles
Page :