Button

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

#Styling

Reakit components are unstyled by default. You're free to use whatever approach you want. Each component returns a single HTML element that accepts all HTML props, including className and style.

The example below uses Emotion. But these styles can be reproduced using static CSS and other CSS-in-JS libraries, such as styled-components.

import { Button } from "reakit/Button";
import { css } from "emotion";

const className = css`
  outline: 0;
  color: #ffffff;
  background: #006dff;
  padding: 0.375em 0.75em;
  line-height: 1.5;
  border: transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 16px;

  &:focus {
    box-shadow: 0 0 0 0.2em rgba(0, 109, 255, 0.4);
  }

  &[disabled],
  &[aria-disabled="true"] {
    cursor: auto;
    opacity: 0.5;
  }

  &:not([disabled]),
  &:not([aria-disabled="true"]) {
    &:hover {
      color: #ffffff;
      background-color: #0062e6;
    }
    &:active,
    &[data-active="true"] {
      color: #ffffff;
      background-color: #004eb8;
    }
  }
`;

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

Learn more in Styling.

#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

Button uses Clickable, and is used by FormPushButton, FormRemoveButton, Disclosure and all their derivatives.

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.