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