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.

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

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

Installation

npm install ariakit

Learn more in Getting started.

API

<Button />

Styling

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

Learn more in Styling.