Bootstrap Buttons can be disabled using one of two methods: the “disabled” class or the “disabled” attribute. We’ll explore the element styling when the button is disabled and how click events are blocked.

You can use either the “disabled” class or the “disable” attribute, both are not needed for disabling a button.
Check out these related posts:
- The Complete Guide to Bootstrap Button Click Events
- Four Bootstrap Button Hover Examples
- The Ultimate Guide To Aligning Bootstrap Buttons
- Easily Disable a Button with JavaScript or CSS (3 Examples)
The Resources section has a Code Sandbox link with a live Bootstrap demo.
Disable Bootstrap Button with “disabled” Class
Here’s the code to disable a vanilla Bootstrap button:
<button
id="button"
type="button"
class="btn btn-primary disabled"
aria-disabled="true"
>
Disabled Button
</button>
This does not use React-Bootstrap. Notice that I also added classes “btn
” and “btn-primary
“. The btn-primary
class is not needed for disabling, but the btn
class is. Bootstrap uses the btn
and disabled
classes together to apply the proper styling.
However, btn-primary
and disabled
do create a selector that lightens the button color.

How does the disabled
class block clicks and hovers from firing events? It applies pointer-events: none;
which means the element cannot be the target of pointer events.
This means that we do not need to apply the “disabled” attribute on the button for it to be unclickable.
Finally, notice that the opacity was set to .65. This is a roughly 1/3rd reduction in opacity, which visually lightens the button to indicate it is unclickable.
Disable Bootstrap Button with “disabled” Attribute
The disabled
attribute is built into HTML and is not specific to Bootstrap. It disables a button even if the button does not have btn
class applied.
However, if the button does have btn
class (making it a “Bootstrap” button), then the disabled
attribute behaves exactly the same as applying the disabled
class. Notice in the screenshot below we see all the disabled classes applied in Dev Tools even though the button uses the disabled
attribute, not the disabled
class.

Pointer events are once again set to none
, which means the element cannot be clicked or hovered.
If you are using Bootstrap with React and TypeScript, set the disabled
attribute to true
or false
. It is common to set it to “disabled” (which is interpreted as “true” by the compiler), but the attribute requires a Boolean.

Disable React-Bootstrap Button
If you are using Bootstrap inside of React, then you have access to state management values. I suggest using a state value to toggle whether a button is disabled or enabled.
The following code is from the Code Sandbox example linked to in the Resources section:
//State value
const [toggleDisabled, setToggleDisabled] = React.useState(false);
//JSX
<button
className="btn btn-primary"
type="button"
disabled={toggleDisabled}
aria-disabled={toggleDisabled ? "true" : "false"}
onClick={handleClick}
>
Bootstrap Button: {toggleDisabled ? "Disabled" : "Enabled"}
</button>
<Button
className={`${toggleDisabled ? "disabled" : ""}`}
aria-disabled={toggleDisabled ? "true" : "false"}
onClick={handleBRClick}
>
React-Bootstrap Button: {toggleDisabled ? "Disabled" : "Enabled"}
</Button>
In the demo, I have a button that toggles the toggleDisabled
value when it is clicked. One the first button above (a pure Bootstrap button), the disabled
attribute is true or false depending on the value of toggleDisabled
.
In the second button (a React-Bootstrap Button component), the class value is conditionally set to disabled
based on the toggleDisabled
value. Both buttons’ aria-disabled value is dependent on the state value.
Bootstrap Disabled Button Tabbing and ARIA Compliance
It is good practice to make buttons ARIA compliant and friendly to users using screen readers. You also don’t want users to be able to tab to a disabled button (which can still happen with disabled class applied).

Add the following two attributes to buttons with disabled
class applied:
tabindex="-1"
aria-disabled="true"
Now the button will be properly understood as disabled and cannot be tabbed.