References

Beginner-friendly references for web development, with live, editable examples.

The HTML <button> tag

Element All modern browsers Updated
Quick answer

The HTML <button> element is a native, fully accessible clickable button. Set its type to button, submit or reset. Always prefer a real <button> over a clickable <div> — it is keyboard-operable and announced correctly for free.

Overview

The <button> element creates a clickable control. Unlike <input type="button">, it can contain rich content — text, icons, even an <img> — between its tags.

Its type attribute is important: inside a <form> the default is submit, which can cause accidental submissions, so set type="button" for buttons that run JavaScript. Buttons also power modern declarative UI: popovertarget toggles a popover, and the 2025 command/commandfor attributes open dialogs — both with no JavaScript.

Because a native button is focusable, operable with Enter and Space, and announced as a button by screen readers, it is always the right choice for an action — never reimplement one from a <div> or <a>.

Syntax

<button type="button">Click me</button>

Attributes

The <button> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
command show-modal close request-close toggle-popover show-popover hide-popover a custom --command Declares a built-in button command (invoker commands).
commandfor The id of the target element. Targets the element a button command controls.
disabled A boolean attribute — present or absent. Disables a form control.
form The id of a <form> element. Associates a control with a form by id.
formaction A URL. Overrides the form action for one submit button.
formenctype application/x-www-form-urlencoded multipart/form-data text/plain Overrides the form encoding for one button.
formmethod get post dialog Overrides the form method for one submit button.
formnovalidate A boolean attribute — present or absent. Skips validation for one submit button.
formtarget _self _blank _parent _top a named context Overrides the form target for one button.
name A string (the field name used in the submitted data). Names a form control for submission.
popovertarget The id of an element that has the popover attribute. Makes a button toggle a popover.
popovertargetaction toggle (default) show hide Sets whether a popover button shows, hides or toggles.
type submit (default in a form) reset button Sets a button's behavior.
value A string or number, depending on the element and input type. Sets a control's value.

Example

Live example 
<button type="button" onclick="this.textContent = 'Clicked ' + (this.dataset.n = (+this.dataset.n||0)+1) + '\u00d7'">Click me</button>

Best practices

  • Always set type explicitly inside forms to prevent accidental submits.
  • Use a real <button> for actions and an <a> for navigation.
  • Give every button a clear, descriptive label; for icon-only buttons add an aria-label.
  • Use popovertarget or command/commandfor for declarative UI instead of hand-rolled JavaScript where possible.
  • Indicate a disabled state with the disabled attribute, and avoid disabling the only way to recover from an error.

Accessibility

The native <button> is one of accessibility's biggest wins — it is focusable, operable with both Enter and Space, and announced with the "button" role automatically. To keep it accessible:

  • Give it a meaningful label from its text content, or an aria-label when it shows only an icon.
  • Use aria-pressed for toggle buttons and aria-expanded for buttons that show and hide content.
  • Prefer the native disabled attribute, but remember a disabled button is not focusable — sometimes aria-disabled is the better choice.

Frequently asked questions

What is the difference between <button> and <input type="button">?
A <button> can contain HTML content (text, icons) between its tags; an <input> button is empty and uses its value for the label. <button> is more flexible and usually preferred.
Why should I set the type attribute on a button?
A <button> inside a form defaults to type="submit", which submits the form when clicked. Set type="button" for buttons that should only run JavaScript.
Should I use a <div> or <a> as a button?
No. Use a real <button> — it is keyboard-focusable, activates with Enter/Space, and is announced as a button. A clickable <div> needs a role, tabindex and key handlers to come close.
How do I open a popover or dialog from a button without JavaScript?
Use popovertarget to toggle a popover, or the newer command and commandfor attributes to control a dialog.
When should I use a button vs a link?
Use a <button> for an action (submit, toggle, open) and an <a> for navigation to a URL.
How do I make a button act as a link?
For navigation, use a styled <a> rather than a button — it is more accessible and better for SEO. If you must use a button, navigate in a click handler (onclick="location.href='/page'"), but a real link is preferred.
How do I disable a button?
Add the disabled attribute. To keep it focusable and announced while non-operable, use aria-disabled="true" and prevent the action in JavaScript instead.
br canvas