HTML <button> disabled Attribute

The disabled attribute on a <button> tag disables the button. The button appears grayed out and it is unusable.

Example

#

A disabled attribute on a <button> tag.
The button is unusable.

<button disabled type="button"
        onclick="alert('Button was clicked!');">Click Me</button>

Using disabled

Thedisabled attribute specifies that the button is disabled.

The button appears grayed out and is not usable.

Disabled buttons are not included in form submission.


Syntax

<button disabled>
or
<button disabled="disabled">

Values

#

Value Description
disabled Use value 'disabled' or no value at all. Both are valid.

More Examples

A <button> element that is not disabled.
Clicking the second button toggles the first button's disabled attribute.


<button type="button" id="mybutton"
        onclick="alert('Button was clicked!');"
        style="border:1px solid teal;">My Button</button>

<br />
<button type="button" onclick="toggle();">Toggle disable</button>

<script>
  let toggle = () => {
    let element = document.getElementById('mybutton');
    let disabled = element.getAttribute("disabled");

    if (disabled) {
        element.removeAttribute("disabled");
    } else {
        element.setAttribute("disabled", "disabled");
    }
  }
</script>

Browser support

Here is when disabled support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <button>
Guides