Marques Woodson

Working with React-bootstrap Buttons

Marques Woodson

Dec 27, 2019
9 Min read
29,690 Views

Dec 27, 2019
9 Min read
29,690 Views

Web Development

React

Introduction

Buttons are one of the most commonly used components in a client-side application. Having custom buttons in your design system is pretty much a necessity.

One of the most popular component libraries on the market, Bootstrap, has you covered with button components. Bootstrap provides tons of options for customizing buttons to your own needs. The one caveat is that Bootstrap relies on jQuery for functionality. If you are building an application in React, you need something that works without jQuery. That's where react-bootstrap comes in.

In this guide, I show you how to use the button component from the react-bootstrap library to add fully customized, reusable buttons to your react application.

Installation

Getting started with react-bootstrap is simple. You just need to add the Bootstrap and react-bootstrap packages from npm:

1yarn add bootstrap react-bootstrap
2# or
3npm i bootstrap react-bootstrap

bash

To make sure your buttons are utilizing the Bootstrap CSS, you need to import that into your application, along with the button component.

1import React from 'react';
2import Button from 'react-bootstrap/Button';
3import 'bootstrap/dist/css/bootstrap.min.css';
4...

Now we can start using our buttons:

1import React from 'react';
2import Button from 'react-bootstrap/Button';
3import 'bootstrap/dist/css/bootstrap.min.css';
4
5const App = () => {
6  return (
7    <form>
8      <label htmlFor='username'>Username</label>
9      <input id='username' />
10      <Button type='submit'>Submit</Button>
11    </form>
12  );
13};

Buttons in a Form

Buttons don't have to be used only to submit a form. We can use buttons as checkboxes or radio options as well. An example of a list of checkbox options using buttons would look like this:

1import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
2import ToggleButton from 'react-bootstrap/ToggleButton';
3const App = () => {
4  return (
5    <form>
6      <label htmlFor='name'>Name</label>
7      <input id='name' />
8
9      <label htmlFor='genre'>Favorite genre of music</label>
10      <ToggleButtonGroup type='checkbox' name='genre'>
11        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
12        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
13        <ToggleButton value={'country'}>Country</ToggleButton>
14      </ToggleButtonGroup>
15
16      <Button type='submit'>Submit</Button>
17    </form>
18  );
19};

Button Groups

Here I'm using some components that make it easier to deal with multiple buttons. The ToggleButtonGroup component is used to group form components where each ToggleButton is an option in that group. ToggleButtonGroup takes a name attribute, which is like the name on an <input />. Each ToggleButton takes a value attribute, which works like <input value={..}>. If we need to pre-check any of the checkboxes, we accomplish that with the defaultValue property:

1const App = () => {
2  return (
3    <form>
4      <label htmlFor='name'>Name</label>
5      <input id='name' />
6
7      <label htmlFor='genre'>Favorite genre of music</label>
8      <ToggleButtonGroup
9        type='checkbox'
10        name='genre'
11        defaultValue={['hip_hop', 'jazz']}
12      >
13        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
14        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
15        <ToggleButton value={'country'}>Country</ToggleButton>
16      </ToggleButtonGroup>
17
18      <Button type='submit'>Submit</Button>
19    </form>
20  );
21};

The same would work with radio buttons, except you would have only one option pre-selected:

1const App = () => {
2  return (
3    ...
4      <ToggleButtonGroup
5        type='radio'
6        name='genre'
7        defaultValue={['jazz']}
8      >
9        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
10        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
11        <ToggleButton value={'country'}>Country</ToggleButton>
12      </ToggleButtonGroup>
13
14      <Button type='submit'>Submit</Button>
15    ...
16  );
17};

Controlled States

Using React to control the state of form inputs is widespread. Controlling the state means a state variable holds the value of an input within a React component. There's not anything special you need to do in a react-bootstrap component to make this work. You need to create a state property on your component, and you need to create a function that updates the state's value when the form input changes.

1const App = () => {
2  const [genre, setGenre] = React.useState();
3  const handleGenreChange = (selectedValue) => {
4    setGenre(selectedValue)
5  }
6  return (
7    ...
8      <ToggleButtonGroup
9        type='checkbox'
10        name='genre'
11        value={genre}
12        onChange={handleGenreChange}
13      >
14        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
15        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
16        <ToggleButton value={'country'}>Country</ToggleButton>
17      </ToggleButtonGroup>
18
19      <Button type='submit'>Submit</Button>
20    ...
21  );
22};

Loading State

We can also add a loading state to our buttons. Adding a loading state is helpful when we need to make a network request when a user clicks a button. We want to make sure they can only click the button once while the network waits to respond.

1const App = () => {
2  const [isLoading, setIsLoading] = React.useState(false);
3
4  React.useEffect(() => {
5    if (isLoading) {
6      fetch('http://someAPI')
7        .then(response => response.json())
8        .then(success => {
9          setIsLoading(false);
10        })
11        .catch(e => {
12          setIsLoading(false);
13        });
14    }
15  }, [isLoading]);
16
17  const submitForm = () => {
18    setIsLoading(true);
19  };
20  return (
21    <form>
22      <label htmlFor='name'>Name</label>
23      <input id='name' />
24
25      <label htmlFor='genre'>Favorite genre of music</label>
26      <ToggleButtonGroup type='checkbox' name='genre'>
27        <ToggleButton value={'hip_hop'}>Hip Hop</ToggleButton>
28        <ToggleButton value={'jazz'}>Jazz</ToggleButton>
29        <ToggleButton value={'country'}>Country</ToggleButton>
30      </ToggleButtonGroup>
31
32      <Button
33        type='submit'
34        disabled={isLoading}
35        onClick={!isLoading ? submitForm : null}
36      >
37        Submit
38      </Button>
39    </form>
40  );
41};

Styled Buttons

Bootstrap gives you many default button variants to use, including primary, secondary, and success. The colors and styles of these variants can be updated by making a copy of the node_modules/bootstrap/scss/_variables.scss and putting the copy into your own src/ code. There you can update the SCSS variables for the color scheme as well as the button properties.

You can set the size of a button using the size property. The available options are sm or lg.

1<ButtonToolbar>
2  <Button variant='primary' size='sm'>
3    Primary
4  </Button>
5  <Button variant='secondary' size='lg'>
6    Secondary
7  </Button>
8</ButtonToolbar>

You can also set your button to span the full width of its parent using the block property. The value is a Boolean and defaults to false.

1<ButtonToolbar>
2  <Button variant='primary' block={true}>
3    Primary
4  </Button>
5</ButtonToolbar>

Here is a full list of the button variants that come with Bootstrap.

1<ButtonToolbar>
2  <Button variant='primary'>Primary</Button>
3  <Button variant='secondary'>Secondary</Button>
4  <Button variant='success'>Success</Button>
5  <Button variant='warning'>Warning</Button>
6  <Button variant='danger'>Danger</Button>
7  <Button variant='info'>Info</Button>
8  <Button variant='light'>Light</Button>
9  <Button variant='dark'>Dark</Button>
10  <Button variant='link'>Link</Button>
11  /* Outline version of the main variants */
12  <Button variant='outline-primary'>Primary</Button>
13  <Button variant='outline-secondary'>Secondary</Button>
14  <Button variant='outline-success'>Success</Button>
15  <Button variant='outline-warning'>Warning</Button>
16  <Button variant='outline-danger'>Danger</Button>
17  <Button variant='outline-info'>Info</Button>
18  <Button variant='outline-light'>Light</Button>
19  <Button variant='outline-dark'>Dark</Button>
20</ButtonToolbar>

Conclusion

Working with Bootstrap's buttons in a React application provides you with a robust set of components that can meet your design systems' needs. React-bootstrap provides easy-to-use properties for styling and adding functionality to your buttons. If you'd like to see more detailed documentation for react-bootstrap, visit the docs here.

Thanks for reading 😀

LEARN MORE