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.
Reference: https://react-bootstrap.netlify.app/components/buttons/#buttons
