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.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import { Button } from "@ariakit/react";
export default function Example() {
return <Button className="button">Button</Button>;


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

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue

No Spam. Unsubscribe at any time.