Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub
Reakit is featured on Product Hunt!

Button

Button is a component that enables users to trigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation. It follows the WAI-ARIA Button Pattern.

#Installation

npm install reakit

Learn more in Get started.

#Usage

import { Button } from "reakit/Button";

function Example() {
  return <Button>Button</Button>;
}

#Accessibility

  • Button has role button.

  • When Button has focus, Space and Enter activates it.

    Button
    import { Button } from "reakit/Button";
    
    function Example() {
      return (
        <Button as="div" onClick={() => alert("clicked")}>
          Button
        </Button>
      );
    }
    
    
  • If disabled prop is true, Button has disabled and aria-disabled attributes set to true.

    import { Button } from "reakit/Button";
    
    function Example() {
      return (
        <Button disabled onClick={() => alert("clicked")}>
          Button
        </Button>
      );
    }
    
    
  • If disabled and focusable props are true, Button has aria-disabled attribute set to true, but not disabled.

    import { Button } from "reakit/Button";
    
    function Example() {
      return (
        <Button disabled focusable onClick={() => alert("clicked")}>
          Button
        </Button>
      );
    }
    
    

    This is useful when the presence of a Button is important enough so users can perceive it by tabbing.

Learn more in Accessibility.

#Composition

Learn more in Composition.

#Props

#Button

  • disabled boolean | undefined

    Same as the HTML attribute.

  • focusable boolean | undefined

    When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.