Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
__tests__ chore: Add more tests Apr 23, 2019
Button.ts refactor: Get rid of `mergeProps` (#362) May 20, 2019
README.md chore: Update docs May 11, 2019
index.ts Tooltip (#335) Mar 9, 2019

README.md

path redirect_from
/docs/button/
/components/button/

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

You can’t perform that action at this time.