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:
- Disabling Bootstrap Buttons: The Complete Guide
- The Ultimate Guide To Bootstrap Padding
- The Ultimate Guide To Aligning Bootstrap Buttons
- Easily Disable a Button with JavaScript or CSS
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:
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:
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>
);
}
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>React-Bootstrap Button onClick With TypeScript
The React-Bootstrap Button onClick passes an event prop of type React.MouseEvent<HTMLEvent> to the click handler.
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 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.
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.
