Ariakit
/

Command

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

Button
import { Command } from "@ariakit/react";
import "./style.css";
export default function Example() {
return (
role="button"
className="button"
onClick={() => alert("Accessible button clicked")}
render={<div />}
>
Button
</Command>
);
}

API

<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.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue