The Complete Guide to Bootstrap Button Click Events

You may have seen click and onClick with Bootstrap Buttons and wondered what the difference was. You may also wonder what values exist on the click event that are passed to the click handler. This post will answer these questions.

Bootstrap Button click events are used with vanilla JavaScript, while onClick is used when Bootstrap is used in JSX (paired with React). These also have slightly different TypeScript types. I will show examples of both.

I will also show how to pass additional props to the click handler.

Take a look at these related links:

The Resources section has a link to a Code Sandbox example.

Bootstrap Button Click vs. onClick (+ TypeScript)

The Bootstrap Button Click Event is used with JavaScript and HTML. You will likely be attaching the click event listener with JavaScript’s addEventListener function.

The TypeScript typing for click is simply MouseEvent. Remember, this is plain JS with no React or Angular.

Here’s a screenshot of some of the fields on the click event:

Bootstrap Button Click Event Properties
Bootstrap Button Click Event Properties

As you can see, the fields primarily contain DOM information about the Button.

Bootstrap Buttons have an onClick property when they are used in a React project with JSX syntax. The idea is the same, we simply have a shortcut for attaching the event listener.

To clarify, this is not the same as using a react-bootstrap Button! We can use “plain” Bootstrap buttons in a React project without using react-bootstrap. The react-bootstrap library gives us additional components (including Buttons), but we can still use Bootstrap buttons and classes in React.

Here’s example code:

<button className="btn btn-secondary" type="button" onClick={handleClick}>
  Plain Bootstrap Button
</button>

Since this button is used in a React project within JSX, the handleClick function event needs to be typed as React.MouseEvent<HTMLElement>.

Bootstrap Button Click Example

Here is full code for a basic button click example. This uses only HTML, JavaScript, and Bootstrap version 5.

//index.html
<button
 id="button" type="button" class="btn btn-primary">
  Primary
</button>

//button.tsx
import "./styles.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

const handleClick = (event: MouseEvent) => {
  console.log(event);
};

document.getElementById("button")?.addEventListener("click", handleClick);

Notice that this uses only an HTML button element “transformed” into a Bootstrap button by using Bootstrap classes. This button click handler and TypeScript typing would work just as well on a plain HTML button.

The event is the only value passed to the click handler by the event listener.

Boostrap Button onClick Example (With Props)

This example uses a Bootstrap 5 button inside of a React project, but it does not use react-bootstrap.

There are many advantages to using Bootstrap with a library like React. The syntax below is makes it easier to add the click handler and also to pass additional props to the handler.

import React from "react";

const handleClick = (
  event: React.MouseEvent<HTMLElement>,
  printValue: string
) => {
  //event.persist();
  console.log(event);
  console.log(printValue);
};

export default function BootstrapHoverButtons() {
  return (
    <div className="container mt-2">
      <div className="d-grid gap-2">
        <button
          className="btn btn-secondary"
          type="button"
          onClick={(evt) => {
            handleClick(evt, "My Prop");
          }}
        >
          Bootstrap Button
        </button>
      </div>
    </div>
  );
}

The most important syntax in the code above is the onClick arrow function. This calls handleClick and passes evt, which is the JS event that is generated by the user click.

There are no other props passed by the event listener. However, I passed a custom prop which is simply the string “My Prop”. We can pass as many custom props as desired.

If we didn’t need to pass a second prop, I could simply have written onClick={handleClick} and the event would have been passed through. However, we need to use an arrow function to pass custom props that are not generated by the click listener.

Here’s the Bootstrap Button with onClick, and the event and props are logged in the console:

Bootstrap Button onClick
Bootstrap Button onClick

I had an interesting “synthetic event” error occur in Code Sandbox when I tried to log the event. If you have a similar issue, uncomment the event.persist(); line.

This example uses the bootstrap, react, and react-dom libraries.

Bootstrap 4 Button Click Example: Change Button Background Color

The Button click event is identical in Bootstrap 4 and Bootstrap 5. The main difference is what classes are available to be applied in the different versions of Bootstrap.

Here’s an example where a different color is applied by swapping out a different class. This only uses v4 classes and I use React’s useState to handle the toggle state.

import React from "react";

export default function BootstrapHoverButtons() {
  const [toggleColor, setToggleColor] = React.useState(false);
  const handleClick = (
    event: React.MouseEvent<HTMLElement>,
    printValue: string
  ) => {
    setToggleColor(!toggleColor);
  };

  return (
    <div className="container mt-2">
      <button
        className={`${toggleColor ? "btn btn-primary" : "btn btn-secondary"}`}
        type="button"
        onClick={(e) => {
          handleClick(e, "My Prop");
        }}
      >
        Bootstrap Button
      </button>
    </div>
  );
}
Bootstrap v4 Button Click Toggle Color
Bootstrap v4 Button Click Toggle Color

Changing the background color is as simple as swapping out the class. Another way to change the background color on click would be to toggle style values:

<button style={{ backgroundColor: `${toggleColor ? "red" : "green"}` }}>Text</button>

Resources

Bootstrap Button Docs

Code Sandbox Link

Share this post:

Leave a Comment

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