The HTML <button> Element

Basic

The <button> element creates an interactive control that a user can activate. A button can submit or reset a form, invoke a declarative command, or provide a hook for scripted behavior. Unlike a generic container made clickable with JavaScript, a native button already participates in the browser's interaction, keyboard, focus, and accessibility model.

What the <button> element represents

A button is an interactive control, not merely a styled piece of text. Its meaning comes from the action it performs and from its relationship to the surrounding document. Use <button> when the user is being asked to activate an action; use a link when the user is being taken to another resource or URL.

<button type="button">Show details</button>

<? type="button">Save</button>

The three core button types

The type attribute controls the button's default behavior. The three core values are submit, reset, and button. If a button is associated with a form and type is missing, empty, or invalid, the default behavior is submit.

<form action="/search" method="get">
  <input name="q">
  <button type="submit">Search</button>
</form>

Use type="submit" when the button should submit its form. Use type="reset" when the button should restore the form controls to their initial values. Use type="button" when the button is an action control that should not submit or reset the form by default.

Buttons and forms

A button can belong to a form because it is nested inside that form, or it can explicitly name its form owner with the form attribute. The form attribute takes the id of a form in the same document and can associate a button with a form elsewhere in the document.

<form id="profile-form" action="/profile" method="post">
  <input name="displayName">
</form>

<button form="profile-form" type="submit">Save profile</button>

An explicit form owner can be useful when document layout makes it inconvenient to place the button inside the form. It can also override the nearest ancestor form association. The referenced form must be in the same document.

Submit-button overrides

A submit button can override selected submission settings from its form owner. The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes apply to that particular submit action. They do not change the form element itself.

<form action="/save" method="post">
  <input name="title">
  <button type="submit" formaction="/preview" formmethod="get">Preview</button>
  <button type="submit">Save</button>
</form>

This makes it possible for one form to expose multiple submit actions with different destinations or submission settings. The override attributes matter when the button is actually acting as a submit button and has a form owner.

The button value and name

A button can have a name and value. When that button is the submitter for a form submission, its name/value pair can be included in the submitted form data. This is useful when one form offers multiple submit actions and the server needs to know which action the user selected.

<button type="submit" name="action" value="save">Save</button>
<button type="submit" name="action" value="publish">Publish</button>

Button content

A button can contain phrasing content, so its label can include more than plain text. This is one reason <button> is often more flexible than input button types. However, interactive content should not be placed inside a button, because that would create nested interactive controls.

<button type="button">
  <strong>Save</strong> changes
</button>

The visible content should still make the action understandable. Decorative icons can accompany a textual label, but an icon-only button needs an accessible name that communicates its action.

Accessible button names

A button needs an accessible name that identifies what it does. Visible text inside the button normally supplies that name. For an icon-only button, provide an appropriate accessible name rather than relying on the icon alone.

<button type="button" aria-label="Close settings">
  <svg aria-hidden="true" viewBox="0 0 20 20">…</svg>
</button>

Disabled buttons

The disabled attribute prevents a button from being activated or focused as a normal interactive control. A disabled button is not merely visually muted: it changes whether the user can interact with it and whether it participates in form behavior.

<button type="submit" disabled>Save</button>

Use disabled when the action genuinely cannot be performed in the current state. Do not rely on disabled styling alone to communicate why an action is unavailable; the surrounding interface should make the state understandable.

Buttons beyond form submission

A button does not need a form. A type="button" control can invoke JavaScript behavior, while newer declarative button features can control supported interactive elements such as dialogs and popovers. The button remains the user-facing invoker; the controlled behavior belongs to the feature being invoked.

<button type="button" commandfor="settings-dialog" command="show-modal">
  Open settings
</button>

<dialog id="settings-dialog">Settings</dialog>

When a native declarative mechanism exists for the interaction you need, it can be preferable to inventing an equivalent behavior entirely in JavaScript. When JavaScript is necessary, keep the native button as the interaction surface.

Button versus link

Choose a button for an action and a link for navigation. A button might open a dialog, submit a form, toggle an interface, or perform an operation. A link points to another URL or resource. Styling a link like a button does not change its semantic purpose, and styling a button like a link does not make it navigation.

<a href="/account">View account</a>
<button type="button">Open account panel</button>

Common mistakes

• Leaving type unspecified on an action button inside a form when it should not submit.

• Using a div or span as a custom button instead of a native button.

• Making an icon-only button without an accessible name.

• Putting another interactive control inside a button.

• Using a button for navigation when a link expresses the destination.

• Using reset buttons casually when restoring a form would be surprising or destructive.

A practical button checklist

• Use <button> for user-invoked actions.

• Choose type="submit", type="reset", or type="button" deliberately.

• Give action buttons an understandable accessible name.

• Use form when a button must explicitly associate with a form elsewhere in the document.

• Use submit-button override attributes only when that specific submit action needs different behavior.

• Use name/value when the submitted form data needs to identify which submitter was activated.

• Keep interactive descendants out of buttons.

• Use links for navigation and buttons for actions.

?