Skip to main content
Reakit
DocumentationNewsletter
Spectrum
GitHub
GitHub

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

The example below uses Emotion and demonstrates how CSS-in-JS can be used to style Reakit components. 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`
  transition: box-shadow 0.15s ease-in-out;
  outline: 0;
  color: #ffffff;
  background: #006dff;
  padding: 0.375em 0.75em;
  line-height: 1.5;
  border: transparent;
  cursor: pointer;
  font-size: 16px;
  border-radius: 0.25rem;

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

  &:not([aria-disabled="true"]) {
    &:hover {
      color: #ffffff;
      border-color: #0057cc;
      background-color: #0062e6;
    }
    &:active,
    &[aria-expanded="true"] {
      color: #ffffff;
      border-color: #0058cf;
      background-color: #004eb8;
    }
  }

  &:focus,
  [aria-activedescendant] &[aria-selected="true"] {
    box-shadow: 0 0 0 0.2em rgba(0, 109, 255, 0.4);
    position: relative;
    z-index: 2;
  }
`;

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

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.