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

Button Form controls

Edit example

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

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

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

export default function Example() {
  return (
    <Button className="focusable clickable button button-default">
      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

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

DisclosureClick a button to either show (expand, open) or hide (collapse, close) a content element in React. This component is based on the WAI-ARIA Disclosure Pattern.

MenuAccess a set of commands within a dropdown menu. This component is based on the WAI-ARIA Menu Pattern and the WAI-ARIA Menu Button Pattern.

SelectSelect a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.

ToolbarGroup a set of related controls, reducing the number of tab stops in the keyboard interface. This component is based on the WAI-ARIA Toolbar Pattern.

FocusablePress Tab or click to shift focus to any React element. This abstract component standardizes focus behavior across different browsers.

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

View all components