<button>

A <button> performs an action: submit a form, change a setting, or open a dialog. Use an anchor with href to navigate to another page.

Its text normally supplies its accessible name. Native buttons can be reached with Tab and activated with Enter or Space.

Smallest working example

<button type="button" onclick="this.textContent = 'Saved'">Save draft</button>

button {
  font: inherit;
  padding: 0.6rem 1rem;
}

This action updates the button’s text. type="button" avoids submitting a surrounding form. Keep the control’s name meaningful before and after the action.

Types and attributes

A regular form-associated button defaults to submit behavior when its type is omitted. Always choose type="button", type="submit", or type="reset" explicitly. A reset button returns fields to their initial values and can discard a person’s input; omit it unless that action is useful.

disabled prevents activation and ordinarily removes the control from keyboard focus. aria-disabled="true" announces a disabled state but does not disable behavior: your code must do that. Use aria-pressed for a toggle button when its on/off state matters.

Buttons accept phrasing content. Do not nest another button, link, or other interactive control inside one.

A practical form

<form action="#" method="get">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required />
  <button type="submit">Subscribe</button>
  <button type="reset">Clear this example</button>
</form>

label,
input {
  display: block;
  margin-bottom: 0.5rem;
}
button,
input {
  font: inherit;
}

The label is associated with the input through matching for and id values. Try submitting an empty or malformed address to observe native validation. The site’s sandbox blocks the final submission; use this as a validation exercise and do not enter real personal information.

An icon needs a name

<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" viewBox="0 0 20 20" width="20" height="20">
    <path d="M4 4L16 16M16 4L4 16" stroke="currentColor" />
  </svg>
</button>

The SVG is decorative because the button already has a name. A title tooltip alone is an unreliable label. Keep a visible focus indicator and enough target size for touch. For a working modal action, continue to dialog.

Sources and browser support

MDN: button describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.