HTML tagForms

<button>

A clickable button: submits a form, clears it, or runs an action on the page.

Display: inline-block
Closing tag: Required
Permitted content: Phrasing content without interactive elements

On this page

Example
Definition and usage
Syntax
Attributes
Attributes in practice
Browser support
Good practices
Related entries

Example

HTML

<button type="button">
  <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true">
    <path d="M4 2 L14 8 L4 14 Z" fill="currentColor" />
  </svg>
  Run code
</button>
<button type="button" disabled>Save (no changes)</button>

Preview

Definition and usage

The <button> element creates a button you can click with a mouse, tap with a finger, or activate with the Enter or Space key. It works with the keyboard and screen readers right away, which a <div> with a click handler won’t give you.

The type attribute determines the behavior. Inside a form, a button with no such attribute has the type submit and submits the form, which can be a source of bugs: clicking "Show password" unexpectedly sends the data. Always give buttons that only run JavaScript code a type="button".

Unlike <input type="submit">, a <button> can contain HTML: an SVG icon, an image or bold text. It can’t, however, contain other interactive elements, such as a link or a second button.

Syntax

<button type="button">Button text</button>

Attributes

type
submit | reset | button
The kind of button. submit (the default inside a form) submits the form, reset restores the initial values of all fields, and button does nothing on its own and waits for your JavaScript code.
disabled
boolean attribute
Disables the button: it can’t be clicked or tabbed to. Graying it out on its own doesn’t tell the user why the button doesn’t work, so explain it nearby.
name / value
text
A pair sent with the form when the form was submitted by this particular button. Thanks to it, the server knows which of several buttons was clicked, for example "Save draft" or "Publish".
form
id of a form
Assigns the button to the form with the given id, even if the button sits outside it in the code, for example in a dialog’s footer or on a bar at the bottom of the screen.
formaction / formmethod / formnovalidate / formtarget
like the form’s `action`, `method`, `novalidate` and `target` attributes
Override the form’s settings for this button only. formnovalidate is the one you’ll reach for most often: a "Save draft" button can submit an incomplete form without validation, while "Submit for review" still requires the fields to be filled in.
popovertarget
id of an element with a `popover` attribute
Opens and closes the given element with a popover attribute without writing any JavaScript. The additional popovertargetaction attribute (toggle, show, hide) determines what happens on click. It has worked in all major browsers since early 2025.
commandfor / command
id of an element / show-modal | close | toggle-popover | show-popover | hide-popover
Invokes a command on the given element without JavaScript: command="show-modal" opens a <dialog> as a modal, and command="close" closes it. This is a recent addition that has only worked in all major browsers since December 2025, so in older versions the button won’t do anything.

Attribute	Values	Description
type	submit \| reset \| button	The kind of button. `submit` (the default inside a form) submits the form, `reset` restores the initial values of all fields, and `button` does nothing on its own and waits for your JavaScript code.
disabled	boolean attribute	Disables the button: it can’t be clicked or tabbed to. Graying it out on its own doesn’t tell the user why the button doesn’t work, so explain it nearby.
name / value	text	A pair sent with the form when the form was submitted by this particular button. Thanks to it, the server knows which of several buttons was clicked, for example "Save draft" or "Publish".
form	id of a form	Assigns the button to the form with the given `id`, even if the button sits outside it in the code, for example in a dialog’s footer or on a bar at the bottom of the screen.
formaction / formmethod / formnovalidate / formtarget	like the form’s `action`, `method`, `novalidate` and `target` attributes	Override the form’s settings for this button only. `formnovalidate` is the one you’ll reach for most often: a "Save draft" button can submit an incomplete form without validation, while "Submit for review" still requires the fields to be filled in.
popovertarget	id of an element with a `popover` attribute	Opens and closes the given element with a `popover` attribute without writing any JavaScript. The additional `popovertargetaction` attribute (`toggle`, `show`, `hide`) determines what happens on click. It has worked in all major browsers since early 2025.
commandfor / command	id of an element / show-modal \| close \| toggle-popover \| show-popover \| hide-popover	Invokes a command on the given element without JavaScript: `command="show-modal"` opens a `<dialog>` as a modal, and `command="close"` closes it. This is a recent addition that has only worked in all major browsers since December 2025, so in older versions the button won’t do anything.

The element also supports all global attributes, such as class, id, style and hidden.

Attributes in practice

type

submit | reset | button

The kind of button. submit (the default inside a form) submits the form, reset restores the initial values of all fields, and button does nothing on its own and waits for your JavaScript code.

HTML

<form>
  <label>Your answer <input type="text" name="answer" value="&lt;p&gt;"></label>
  <p>
    <button type="submit">Check</button>
    <button type="reset">Clear</button>
    <button type="button">Hint</button>
  </p>
</form>

Preview

disabled

boolean attribute

Disables the button: it can’t be clicked or tabbed to. Graying it out on its own doesn’t tell the user why the button doesn’t work, so explain it nearby.

HTML

<button type="submit" disabled>Submit project</button>
<p><small>First add a link to the repository.</small></p>

Preview

name / value

text

A pair sent with the form when the form was submitted by this particular button. Thanks to it, the server knows which of several buttons was clicked, for example "Save draft" or "Publish".

HTML

<form>
  <textarea name="post" rows="2" cols="30" aria-label="Post content">My first post</textarea>
  <p>
    <button type="submit" name="action" value="draft">Save draft</button>
    <button type="submit" name="action" value="publish">Publish</button>
  </p>
</form>

Preview

form

id of a form

Assigns the button to the form with the given id, even if the button sits outside it in the code, for example in a dialog’s footer or on a bar at the bottom of the screen.

HTML

<form id="profile-form">
  <label>First name <input type="text" name="name" value="Ania"></label>
</form>
<footer>
  <button type="submit" form="profile-form">Save profile</button>
</footer>

Preview

formaction / formmethod / formnovalidate / formtarget

like the form’s `action`, `method`, `novalidate` and `target` attributes

Override the form’s settings for this button only. formnovalidate is the one you’ll reach for most often: a "Save draft" button can submit an incomplete form without validation, while "Submit for review" still requires the fields to be filled in.

HTML

<form action="/assignments/submit" method="post">
  <label>Repository link <input type="url" name="repo" required></label>
  <p>
    <button type="submit">Submit for review</button>
    <button type="submit" formaction="/assignments/draft" formnovalidate>Save draft</button>
  </p>
</form>

Preview

popovertarget

id of an element with a `popover` attribute

Opens and closes the given element with a popover attribute without writing any JavaScript. The additional popovertargetaction attribute (toggle, show, hide) determines what happens on click. It has worked in all major browsers since early 2025.

HTML

<button type="button" popovertarget="hint">Show hint</button>
<div id="hint" popover>
  Remember to close the <code>&lt;/p&gt;</code> tag.
</div>

Preview

commandfor / command

id of an element / show-modal | close | toggle-popover | show-popover | hide-popover

Invokes a command on the given element without JavaScript: command="show-modal" opens a <dialog> as a modal, and command="close" closes it. This is a recent addition that has only worked in all major browsers since December 2025, so in older versions the button won’t do anything.

HTML

<button type="button" commandfor="quiz-rules" command="show-modal">Quiz rules</button>
<dialog id="quiz-rules">
  <p>You have 10 minutes for 5 questions. Each has one correct answer.</p>
  <button type="button" commandfor="quiz-rules" command="close">Close</button>
</dialog>

Preview

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Don’t build buttons out of <div> or <span>. You’d lose the keyboard support, focus and button role that <button> gives you for free.
If a click takes you to a different page, that’s a job for the <a> link, not a button.
A button with just an icon needs an accessible name, for example aria-label="Close".

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice HTML in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course