Disabling Bootstrap Buttons: The Complete Guide

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.

Resources

Bootstrap Button v5 docs

Code Sandbox Link