HTML command Attribute

HTML command Attribute

The HTML command attribute specifies an action that a <button> performs on another element. Used with commandfor, it provides declarative controls for dialogs and popovers and can also define custom commands.

Syntax

The command attribute is specified on a <button>. The commandfor attribute identifies the element that receives the command.

<button commandfor="example-dialog" command="show-modal">Open Dialog</button>

<dialog id="example-dialog">
  ...
</dialog>

In this example, activating the button sends the show-modal command to the dialog identified by example-dialog.

Attribute Values

The command attribute supports built-in commands for dialogs and popovers, as well as custom command keywords.

Elements That Use the command Attribute

The command attribute applies to the <button> element.

Using command with commandfor

The command attribute specifies what the button should do, while commandfor identifies the element that the button controls.

<button commandfor="my-dialog" command="show-modal">Open Dialog</button>

<dialog id="my-dialog">
  <p>Dialog content.</p>
  <button commandfor="my-dialog" command="close">Close</button>
</dialog>

The value of commandfor must match the id of an element in the same tree as the button.

Dialog Commands

Three built-in commands are available for controlling <dialog> elements: show-modal, close, and request-close.

<button commandfor="confirm-dialog" command="show-modal">Open Dialog</button>

<dialog id="confirm-dialog">
  <p>This is a modal dialog.</p>
  <button commandfor="confirm-dialog" command="close">Close</button>
</dialog>

The show-modal command opens the dialog as modal, while close closes it immediately. The request-close command first requests that the dialog close, allowing its cancel event to prevent the closing action.

Popover Commands

The show-popover, hide-popover, and toggle-popover commands provide declarative control over an element with the popover attribute.

<button commandfor="help" command="toggle-popover">Toggle Help</button>

<div id="help" popover>
  <p>Helpful information goes here.</p>
  <button commandfor="help" command="hide-popover">Close</button>
</div>

This provides functionality similar to popovertarget and popovertargetaction, while using the more general command system.

Custom Commands

Authors can define custom commands by using a command keyword that begins with two hyphens.

<button commandfor="example" command="--highlight">Highlight</button>

<div id="example">Example content</div>

A custom command does not have a built-in browser action. Instead, the targeted element receives a command event that JavaScript can handle.

JavaScript and CommandEvent

When a custom command is invoked, JavaScript can listen for the command event on the targeted element and inspect the command that was sent.

const example = document.getElementById("example");

example.addEventListener("command", (event) => {
  if (event.command === "--highlight") {
    example.classList.toggle("highlight");
  }
});

The event's command property contains the command value, while its source property identifies the button that issued the command.

Common Mistakes

Do not confuse command with commandfor. The command attribute specifies the action, while commandfor identifies the element that receives it.

<button commandfor="my-dialog" command="show-modal">Open Dialog</button>

Do not use an arbitrary word for a custom command. Custom command keywords must begin with two hyphens.

<!-- Incorrect custom command -->
<button commandfor="example" command="highlight">Highlight</button>

<!-- Correct custom command -->
<button commandfor="example" command="--highlight">Highlight</button>

Do not assume that a custom command automatically performs an action. JavaScript must handle the resulting command event and provide the custom behavior.

Browser Support

Baseline: Newly available indicates that a feature is supported in the latest stable version of each of the core browsers. Most users can use these features reliably, but they may not work in older browser versions.

The command attribute on the <button> element is supported in the latest core browser versions, but it may not work in older browser versions.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the command Attribute

The example uses command="show-modal" and command="close" with commandfor to open and close a modal dialog without JavaScript.

Summary

The HTML command attribute specifies an action for a <button> to perform on the element identified by commandfor. Built-in commands can open and close dialogs or show, hide, and toggle popovers. Custom command keywords beginning with two hyphens can also dispatch a command event for JavaScript to handle.