Trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

import { Button } from "@ariakit/react";
import "./button.css";
export default function Example() {
return (
<Button className="focusable clickable button button-default">


<Button />

Activating on Enter and Space

By default, native button elements are clicked during the Enter keydown and Space keyup events. It is recommended to use native buttons whenever possible since they are more accessible and have better browser support.

However, if you need to render Button as a different element, you can do so through composition. Ariakit will ensure that both Enter and Space activate the button. This behavior can be controlled with the clickOnEnter and clickOnSpace props, which default to true.


For more information on styling with Ariakit, refer to the Styling guide.

Styling the focus-visible state

Since Button uses Focusable, you can style its focus-visible state using the data-focus-visible attribute. This is similar to the native :focus-visible pseudo-class, but it also supports composite widgets with virtualFocus:

.button[data-focus-visible] {
outline: 2px solid red;

Alternatively, you can use the onFocusVisible prop to handle the state in JavaScript.

Styling the disabled state

When the accessibleWhenDisabled prop is true, the button element won't have the disabled attribute. This is so users can still focus on the button while it's disabled. Because of this, you should use aria-disabled to style the disabled state:

.button[aria-disabled="true"] {
opacity: 0.5;

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue