HTML <button> hidden Attribute

The hidden attribute on a <button> tag hides that button. Althought the button is not visible, its position on the page is maintained.

Example

#

A hidden attribute on a <button>.
The button is not visible.

An invisible button:

<p>An invisible button:</p>

<button type="button" hidden>My Button</button>

Using hidden

The hidden attribute hides the <button> element.

You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.

A hidden <button> is not visible, but maintains its position on the page.


Syntax

<button hidden>
or
<button hidden="hidden">

Values

#

Value Description
hidden Use value 'hidden' or no value at all.

More Examples

Clicking the second button toggles the hidden attribute on the first <button>.



<div>
  <button id="button" type="button"
          onclick="alert('Button was clicked!');">My Button</button>

  <br /><br />
  <button onclick="toggle();">Toggle hidden</button>
</div>

<script>
  let toggle = () => {

    let element = document.getElementById("button");
    let hidden = element.getAttribute("hidden");

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

Code explanation

The first button is a regular button without the hidden attribute.

Clicking the second button calls JavaScript which toggles the hidden attribute on the first button.


Browser support

Here is when hidden 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