Command

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Command } from "ariakit/command";
import "./style.css";

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

Installation

npm install ariakit

Learn more in Getting started.

API

<Command />

Command vs. Button

In short, if you need a semantic button element, you should use the Button component.

The Button component uses Command underneath and inherits all its features, but Button automatically adds the role="button" attribute when necessary (for example, when rendering a non-native button).

If you need a clickable element with a different semantic role (e.g., menuitem), and you're not using the specific Ariakit component (e.g., MenuItem), you can use Command.