Post navigation

React JS

React bootstrap button – how to make great buttons

Do you want to know how to make your Bootstrap buttons look good? React-bootstrap provides a library of components that will help you create beautiful, responsive UI’s, and in this post I will look in detail at using the Button component. You can quickly change the color of each button, switch between flat and outline styles, adjust the size of the button, and switch between each state (normal/active/disabled)! If you’re searching for ‘React Bootstrap icon button‘ then you’ll find a working example in this post, using both an image icon, and an icon from an icon library.

Use Bootstrap with React

To use Bootstrap with React you need to install the react-bootstrap package like this (if you haven’t used it at all so far):

npm install react-bootstrap@next bootstrap@5.1.1

… although I’d recommend checking the official react-bootstrap site to check the version number you should be importing. If you want more general information about using Bootstrap with react then read my earlier post. Now to start working with the React Button component…..

React bootstrap button import

To use any Buttons in your page you need to import the Button object at the top of your page like this:

import Button from 'react-bootstrap/Button';

To create the absolute simplest Bootstrap button in your React page use this code:

<Button>I am a simple button</Button> 

It is that simple – just an opening and closing Button tag, and the text between defines the label of the button. Bootstrap will presume default values for the size and colour (blue). So what if you want your button to be a different size to this? If we presume the default size is medium, there are two other sizes to easily use – small and large, as follows:

<Button size="sm">Small button</Button>
<Button size="lg">Large button</Button>

To change colours or behaviours it’s just a case of checking the comprehensive react-bootstrap documentation and using the appropriate ones for your needs. For example:

//change warning for success/info/primary/secondary etc to change the colour
<Button size="sm" variant="info">
  Ok
</Button>

Bootstrap react button with icon

Do you want to add an icon to a React Bootstrap button? It’s really, really simple with bootstrap-react. You can use a graphic – a png or an svg for instance, or you can use an icon from any icon library. Here’s an example using an icon from the react-bootstrap-icons library (https://icons.getbootstrap.com/ ). To install the library type:

npm install react-bootstrap-icons --save

.. and then to use an icon you have to declare it like this at the top of your file:

import { ArrowRight } from 'react-bootstrap-icons';

… replacing ‘ArrowRight‘ with whatever icon name you are intending to use. So here is an example of a button with an icon using react-bootstrap:

//add at the top of your file to import the relevant icon
import { Heart } from "react-bootstrap-icons";

//add this where you want to put the button in the code
<Button size="lg" variant="info">
  <Heart /> Add item
</Button>

And what about using an svg or png image for the icon instead of an image library icon?

//add at the top of your file to import the relevant image
import addImg from "../src/img/add.svg";

//add this where you want to put the button in the code
<Button size="lg" variant="info">
   <img src={addImg} alt="add item" width="30" /> Add item
</Button>

React bootstrap button onClick

To make the button do something we use the onClick property of the Button component. I’ve called the method handleClick, but you could call this whatever you want.

<Button size="lg" onClick={handleClick}>
  Take photo <CameraFill />
</Button>

Now add the method itself:

const handleClick = () => {
  //do stuff here
};

Now go and make some Buttons!

Here is the full code for the examples shown in the header image:

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Stack from "react-bootstrap/Stack";

import Button from "react-bootstrap/Button";
import Alert from "react-bootstrap/Alert";

import addImg from "../src/img/add.svg";
import { Heart, CameraFill } from "react-bootstrap-icons";
import { BarChartFill } from "react-bootstrap-icons";

import "./App.css";

function App() {
  const [showMessage, setShowMessage] = useState(false);

  const handleClick = () => {
    //do stuff here
    setShowMessage("true");
  };

  return (
    <div className="App">
      <header className="App-header">
        <p>
          React Bootstrap <code>Button</code> examples.
        </p>
      </header>
      <Container>
        <Row>
          <Col>
            <Alert show={showMessage} variant="success">
              <Alert.Heading>Success</Alert.Heading>
              <p>
                You clicked the camera button! This is an Alert, and these can
                be shown in a variety of styles provided by Bootstrap.
              </p>
              <hr />
              <div className="d-flex justify-content-end">
                <Button
                  onClick={() => setShowMessage(false)}
                  variant="outline-success"
                >
                  Close this alert
                </Button>
              </div>
            </Alert>
          </Col>
        </Row>
        <Row>
          <Col className="text-left">
            <h2>Button Sizes</h2>
            <Stack direction="horizontal" gap={3}>
              <Button size="lg" variant="info">
                Large
              </Button>
              <Button variant="info">Default</Button>{" "}
              <Button size="sm" variant="info">
                Small
              </Button>
            </Stack>

            <h2>Button states</h2>
            <Stack direction="horizontal" gap={3}>
              <Button>Normal button</Button>{" "}
              <Button active>Active button</Button>{" "}
              <Button disabled>Disabled button</Button>
            </Stack>

            <h2>Pre defined button colours & styles</h2>
            <Stack direction="horizontal" gap={3}>
              <Button variant="secondary">Secondary</Button>{" "}
              <Button variant="secondary" disabled>
                Secondary - disabled
              </Button>
              <Button size="sm" variant="warning">
                Warning
              </Button>{" "}
              <Button size="sm" variant="warning" disabled>
                Warning - disabled
              </Button>
              <Button variant="outline-success">Outline success</Button>{" "}
              <Button variant="outline-success" disabled>
                Outline success - disabled
              </Button>{" "}
            </Stack>

            <h2>React bootstrap buttons with icons</h2>
            <Stack direction="horizontal" gap={3}>
              <Button variant="info">
                <img src={addImg} alt="add item" width="30" /> Add item
              </Button>{" "}
              <Button variant="outline-danger">
                <BarChartFill /> Reports
              </Button>
              <Button size="sm" variant="success">
                <Heart /> Like
              </Button>
            </Stack>

            <h2>Add an onClick event to the button</h2>
            <Stack direction="horizontal" gap={3}>
              <Button size="lg" onClick={handleClick}>
                Take photo <CameraFill />
              </Button>{" "}
            </Stack>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;