React Bootstrap — Button Customizations

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to work with React Bootstrap buttons.

Buttons Basics

React Bootstrap provides us with multiple styles of buttons.

We can change the style with the variant prop.

For example, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Button variant="primary">button</Button>{" "}
      <Button variant="link">Link</Button>
    </>
  );
}

We have different varieties of buttons with different background colors.

variant has the background color of the button.

If the variant is link , then it’s displayed as a link.

Button Sizes

We can change the size with the size prop.

For instance, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <div>
        <Button variant="primary" size="lg">
          Large
        </Button>{" "}
        <Button variant="secondary" size="lg">
          Large
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm">
          Small
        </Button>{" "}
        <Button variant="secondary" size="sm">
          Small
        </Button>
      </div>
    </>
  );
}

We set the size to lg to create a large button.

And we set the size to sm to create a small button.

Also, we can add the block prop to make them display as a block-level element.

For example, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <div>
        <Button variant="primary" size="lg" block>
          Large button
        </Button>{" "}
        <Button variant="secondary" size="lg" block>
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm" block>
          Small button
        </Button>{" "}
        <Button variant="secondary" size="sm" block>
          Small button
        </Button>
      </div>
    </>
  );
}

Then they all take up the whole row.

Active State

We can set the active to make them display in a different style to indicate that they’re active.

For example, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <div>
        <Button variant="primary" size="lg" active>
          Large button
        </Button>{" "}
        <Button variant="secondary" size="lg" active>
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm" active>
          Small button
        </Button>{" "}
        <Button variant="secondary" size="sm" active>
          Small button
        </Button>
      </div>
    </>
  );
}

Disabled State

To make the buttons disabled, we can add the disable prop to the Button .

For example, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <div>
        <Button variant="primary" size="lg" disabled>
          Large button
        </Button>{" "}
        <Button variant="secondary" size="lg" disabled>
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm" disabled>
          Small button
        </Button>{" "}
        <Button variant="secondary" size="sm" disabled>
          Small button
        </Button>
      </div>
    </>
  );
}

Now they’re all disabled since we added the disabled prop.

If the button is rendered as an a element, then pointer-events: none is used to disable the link.

Button Loading State

We can set the loading state of a button.

To do that, we just set the props that we described above and the text content to indicate that it’s loading.

For instance, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [isLoading, setLoading] = React.useState(false);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 6000);

    return () => {
      clearTimeout(timer);
    };
  }, [isLoading]);

  return (
    <Button
      variant="primary"
      disabled={isLoading}
      onClick={isLoading => setLoading(true)}
    >
      {isLoading ? "Loading…" : "Click to load"}
    </Button>
  );
}

We have a button that sets the isLoading state to true when it’s clicked.

This will also change the text to ‘Loading…’.

We also have the useEffect callback to set the isLoading state to false after 6 seconds.

The button is disabled with isLoading is true so that the user can’t click anything when the button is clicked.

Conclusion

We can set the disabled , size , and variant props for the buttons.

They let us change the disabled state, size and style respectively.