HTMLButtonElement: command property

Baseline 2025

Newly available

Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Thecommand property of theHTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect,commandfor must be set.

It reflects thecommand HTML attribute.

Value

A string. See thecommand attribute for valid values.

Examples

Basic example

html

<button commandfor="mypopover" command="toggle-popover">  Toggle popover</button><div popover>  <button commandfor="mypopover" command="hide-popover">Hide popover</button></div>

const popover = document.getElementById("mypopover");const toggleBtn = document.getElementById("toggleBtn");toggleBtn.command = "show-popover";

Using custom values for commands

In this example, three buttons have been created usingcustom values forcommand.Each button targets the same image using thecommandfor attribute.

html

<div>  <button commandfor="the-image" command="--rotate-left">Rotate Left</button>  <button commandfor="the-image" command="--reset">Reset</button>  <button commandfor="the-image" command="--rotate-right">Rotate Right</button></div><img   src="/shared-assets/images/examples/dino.svg"  alt="dinosaur head rotated 0 degrees" />

.controls {  margin-block-end: 20px;}

An event listener is attached to the image using thecommand event.When one of the buttons is clicked, the listener runs code based on the customcommand value assigned to the button, rotating the image and also updating it'salt text to indicate the new angle of the image.

const image = document.getElementById("the-image");image.addEventListener("command", (event) => {  let rotate = parseInt(event.target.style.rotate || "0", 10);  if (event.command === "--reset") {    rotate = 0;    event.target.style.rotate = `${rotate}deg`;  } else if (event.command === "--rotate-left") {    rotate = rotate === -270 ? 0 : rotate - 90;    event.target.style.rotate = `${rotate}deg`;  } else if (event.command === "--rotate-right") {    rotate = rotate === 270 ? 0 : rotate + 90;    event.target.style.rotate = `${rotate}deg`;  }  event.target.alt = `dinosaur head rotated ${rotate} degrees`;});