React Bootstrap Button Example — Bootstrap
Button is very important component of any web application.This bootstrap 4 tutorial help to create beautiful button component. I am using react-bootstrap libs to create button in react application.I have already shared tutorial React Bootstrap Integration with React 16+.
The bootstrap has different flours of button like primary, success, warning etc.The react-bootstrap libs has been converted all bootstrap button into react component.
This tutorial help to use button component into react application.I will cover following types of react bootstrap button component.
- Button: We will use simple button into reactjs.
- Button with Outline: We will create button with outline.
- Button with Size: We will define button component with different size.
- Disabled Button: We will create button component with disabled state.
- Loading Button: We will use bootstrap button component with loader.
- Toggle Button: Bootstrap button as a toggle button component.
React Bootstrap Uses and Example
Lets’ create sample react application and add button component.
React Bootstrap Button
First, I will import Button and ButtonToolbar into react app.js file -
import { Button, ButtonToolbar} from 'react-bootstrap';
You need to add below code into render() function to display button -
<div class="card"> <div class="card-body"> <h5 class="card-title">Button Style</h5> <p class="card-text"> <ButtonToolbar> <Button variant="primary">Primary</Button> <Button variant="secondary" className="ml-1">Secondary</Button> <Button variant="success" className="ml-1">Success</Button> </ButtonToolbar> </p> </div> </div>React Bootstrap Button with Outline
We will create button with outline, The button will have only outline around the border. I will import Button and ButtonToolbar into react app.js file -
import { Button, ButtonToolbar} from 'react-bootstrap';
You need to add below code into render() function to display button -
<div class="card"> <div class="card-body"> <h5 class="card-title">Button Style</h5> <p class="card-text"> <ButtonToolbar> <Button variant="outline-primary">Primary</Button> <Button variant="outline-secondary" className="ml-1">Secondary</Button> <Button variant="outline-success" className="ml-1">Success</Button> </ButtonToolbar> </p> </div> </div>React Bootstrap Button in Disabled State
We will create button and added disabled state into button, I will import Button and ButtonToolbar into react app.js file -
import { Button, ButtonToolbar} from 'react-bootstrap';
You need to add below code into render() function to display button -
<div class="card"> <div class="card-body"> <h5 class="card-title">Button Style</h5> <p class="card-text"> <ButtonToolbar> <Button variant="primary" disabled>Primary</Button> <Button variant="secondary" className="ml-1" disabled>Secondary</Button> <Button href="#" variant="success" className="ml-1" disabled>Success Link</Button> </ButtonToolbar> </p> </div> </div>React Bootstrap Button in Different Size
We can also create bootstrap button in different size as like bootstrap 4 in react, they are providing button class to set size of button, You can set ‘lg’ for large size and ‘sm’ for small size button -
import { Button, ButtonToolbar} from 'react-bootstrap';
Added below code to display button component
<div class="card"> <div class="card-body"> <h5 class="card-title">Button Style</h5> <p class="card-text"> <ButtonToolbar> <Button variant="outline-primary" size="lg">Primary</Button> <Button variant="outline-secondary" className="ml-1" size="sm">Secondary</Button> </ButtonToolbar> </p> </div> </div>Loading button is another popular feature in web application.The loading help to notify the end user about request is processing.You show loader on submit of form, any rest request,loading data etc.
We will import button and ButtonToolbar into react application -
import { Button, ButtonToolbar} from 'react-bootstrap';
we need to set loading variable initial set, this variable is use to show button as loader or normal.
const isLoading = true;
we will create button with loading feature-
<div class="card"> <div class="card-body"> <h5 class="card-title">Button Style</h5> <p class="card-text"> <ButtonToolbar> <Button variant="primary" disabled={isLoading}>{isLoading ? 'Loading...' : 'Click to load'}</Button> </ButtonToolbar> </p> </div> </div>Toggle Button in React Bootstrap
Sometimes, We need to create toggle button that will display functionality on and off based on button click, We just set variable value true and false
We will import Button and ButtonToolbar into react application -
import { Button, ButtonToolbar} from 'react-bootstrap';
set default value for toggle buttons, Also created handler handleChange() method and attached with checkbox group element.
const [value, setValue] = useState([1, 3]);
const handleChange = val => setValue(val);
We will create button with loading feature -
<div class="card"> <div class="card-body"> <h5 class="card-title">Button Style</h5> <p class="card-text"> <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}> <ToggleButton value={1}>Option 1</ToggleButton> <ToggleButton value={2}>Option 2</ToggleButton> <ToggleButton value={3}>Option 3</ToggleButton> </ToggleButtonGroup> </p> </div> </div>Full Code Of React Bootstrap Button
We have react-bootstrap and bootstrap 4 dependency for this code, we will install these dependencies using npm -
npm install --save react-bootstrap bootstrap
import React, {useEffect,useState} from 'react'; import { Button, ButtonToolbar, ToggleButtonGroup, ToggleButton } from 'react-bootstrap'; function App() { const isLoading = true; const [value, setValue] = useState([1, 3]); const handleChange = val => setValue(val); return ( <div className="col-sm-12" style={{"padding-top":"50px"}}> <div className="row"> <div className="col-sm-2"> </div> <div className="col-sm-12"> <header className="App-header"> <h2>Welcome React Bootstrap Button</h2> </header> <div class="card-deck pull-left"> <div class="card"> <div class="card-body"> <h5 class="card-title">Button Style</h5> <p class="card-text"> <ButtonToolbar> <Button variant="primary">Primary</Button> <Button variant="secondary" className="ml-1">Secondary</Button> <Button variant="success" className="ml-1">Success</Button> </ButtonToolbar> </p> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Outline Button</h5> <p class="card-text"> <ButtonToolbar> <Button variant="outline-primary">Primary</Button> <Button variant="outline-secondary" className="ml-1">Secondary</Button> <Button variant="outline-success" className="ml-1">Success</Button> </ButtonToolbar> </p> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Size Button</h5> <p class="card-text"> <ButtonToolbar> <Button variant="outline-primary" size="lg">Primary</Button> <Button variant="outline-secondary" className="ml-1" size="sm">Secondary</Button> </ButtonToolbar> </p> </div> </div> </div> <div class="card-deck pull-left"> <div class="card"> <div class="card-body"> <h5 class="card-title">Button Style</h5> <p class="card-text"> <ButtonToolbar> <Button variant="primary" disabled>Primary</Button> <Button variant="secondary" className="ml-1" disabled>Secondary</Button> <Button href="#" variant="success" className="ml-1" disabled>Success Link</Button> </ButtonToolbar> </p> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Loading Button</h5> <p class="card-text"> <ButtonToolbar> <Button variant="primary" disabled={isLoading}>{isLoading ? 'Loading...' : 'Click to load'}</Button> </ButtonToolbar> </p> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Toggle Button</h5> <p class="card-text"> <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}> <ToggleButton value={1}>Option 1</ToggleButton> <ToggleButton value={2}>Option 2</ToggleButton> <ToggleButton value={3}>Option 3</ToggleButton> </ToggleButtonGroup> </p> </div> </div> </div> </div> </div> </div> ); } export default App;Originally published at https://www.uibootstrap.net on November 14, 2019.
