Button

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.

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

export default function Example() {
  return <Button className="button">Button</Button>;
}

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

export default function Example() {
  return <Button className="button">Button</Button>;
}

API

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

Styling

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;
}
.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;
}
.button[aria-disabled="true"] {
  opacity: 0.5;
}

Related components