The Complete Guide to React-Bootstrap Button onClick

React-Bootstrap is a component library that includes Button components. It can make use of Bootstrap classes for styling the components and handling layouts, making it a great choice for easily creating web pages.

React-Bootstrap Button’s onClick event behaves the same as a Bootstrap button click event in vanilla JavaScript. The event handler receives only one prop by default, which is an object representing the event. Additional custom props can be passed.

The React-Bootstrap Button component is identical to a Bootstrap button that has btn and btn-primary class styling applied.

Take a look at these related links:

React-Bootstrap Button onClick With TypeScript

The React-Bootstrap Button onClick passes an event prop of type React.MouseEvent<HTMLEvent> to the click handler.

React-Bootstrap Button onClick
React-Bootstrap Button onClick

This object mostly has DOM information about the button element that was clicked. Some of the useful data includes the x and y coordinates of the button.

Here’s a simple code example where the event is logged by the click handler.

const handleBRClick = (event: React.MouseEvent<HTMLElement>) => { console.log(event);}

<Button className="btn-secondary" onClick={handleBRClick}>BTN Text</Button>

Here’s a more complex example where the React-Bootstrap onClick handler is passed a second custom prop:

const handleBRClick = (event: React.MouseEvent<HTMLElement>, myText: string) => {
  console.log(myText);
  console.log(event);
};

<Button
  onClick={(e) => {
    handleBRClick(e, buttonText);
  }}
>
  {buttonText}
</Button>

React-Bootstrap Button onClick Example: Change Button Text Color

We can change the Button text color in React-Bootstrap by changing:

  • The bootstrap class applied
  • Directly with inline styling

The syntax for the methods is similar. If you want to style using classes, you can update the class in styles.css to apply any color instead of the default color.

In the code below, the React-Bootstrap Button click handler updates a state value that toggles between two colors. Then this color is applied to the styles prop using string interpolation.

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

export default function BootstrapHoverButtons() {
  const [toggleTextColor, setToggleTextColor] = React.useState(false);

  const handleBRClick = (
    event: React.MouseEvent<HTMLElement>,
    myText: string
  ) => {
    setToggleTextColor(!toggleTextColor);
  };

  return (
    <div className="container mt-2">

      <Button
        className="btn-secondary"
        onClick={(e) => {
          handleBRClick(e, buttonText);
        }}
        style={{ color: `${toggleTextColor ? "yellow" : "orange"}` }}
      >
        React-Bootstrap Button
      </Button>
    </div>
  );
}

Here’s what the button looks like with each text color and with btn-secondary class applied:

React-Bootstrap Button onClick Change Text Color
React-Bootstrap Button onClick Change Text Color

React-Bootstrap Button Click Styling: Remove Outline

The Bootstrap Button has the appearance of an outline or border when it is clicked. This is actually box-shadow that is applied when the Button has focus and active pseudo classes applied to it.

Bootstrap Button Click Outline (Box Shadow)
Bootstrap Button Click Outline (Box Shadow)

You can remove the outline by targeting the focus pseudo class on the button. Here’s the code:

//styles.css
.btn:focus {
  box-shadow: none;
}

If you still see the box-shadow, you may also need to target using the following selector: .btn:focus:active.

Resources

Code Sandbox Link

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.