Command

Click with a mouse or keyboard to trigger an action. This abstract component is based on the WAI-ARIA Command Role⁠.

12345678910111213141516
import { Command } from "@ariakit/react";
import "./style.css";

export default function Example() {
  return (
    <Command
      role="button"
      className="button"
      onClick={() => alert("Accessible button clicked")}
      render={<div />}
    >
      Button
    </Command>
  );
}

import { Command } from "@ariakit/react";
import "./style.css";

export default function Example() {
  return (
    <Command
      role="button"
      className="button"
      onClick={() => alert("Accessible button clicked")}
      render={<div />}
    >
      Button
    </Command>
  );
}

API

<Command />
<Command />

Command vs. Button

In summary, for a semantic button element, the Button component is recommended.

The Button component operates on Command and inherits all its features. It also automatically adds the role="button" attribute when needed, such as when rendering a non-native button.

For a clickable element with a different semantic role, like menuitem, and if you're not using the specific Ariakit component like MenuItem, Command is your go-to option.

Command

API

Command vs. Button

Stay tuned