message: chore: Add style examples to Button readme
diff: @@ -28,11 +28,57 @@ function Example() {
  }
  ```
  +## Styling
  +
  +### CSS in JS
  +
  +- The example below uses [Emotion](https://emotion.sh/docs/introduction) and demonstrates how CSS in JS can be used to style Reakit components. These styles can be reproduced using static CSS, other CSS in JS libraries, or Styled-Components.
  +
  +```jsx unstyled
  +import { Button } from "reakit/Button";
  +import { css } from "emotion";
  +
  +const className = css`
  + color: #ffffff;
  + background: #006dff;
  + padding: 0.375em 0.75em;
  + line-height: 1.5;
  + border: transparent;
  + cursor: pointer;
  + font-size: 16px;
  + border-radius: 2.5px;
  + &[aria-disabled="true"] {
  + cursor: auto;
  + }
  + &: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;
  + }
  + }
  +`;
  +
  +function Example() {
  + return <Button className={className}>Button</Button>;
  +}
  +```
  +
  +Learn more in [Styling](/docs/styling/).
  +
  ## Accessibility
  - `Button` has role `button`.
  - When `Button` has focus, <kbd>Space</kbd> and <kbd>Enter</kbd> activates it.
  +
  <!-- eslint-disable no-alert -->
  +
  ```jsx
  import { Button } from "reakit/Button";
  @@ -44,8 +90,11 @@ function Example() {
  );
  }
  ```
  +
  - If `disabled` prop is `true`, `Button` has `disabled` and `aria-disabled` attributes set to `true`.
  +
  <!-- eslint-disable no-alert -->
  +
  ```jsx
  import { Button } from "reakit/Button";
  @@ -57,8 +106,11 @@ function Example() {
  );
  }
  ```
  +
  - If `disabled` and `focusable` props are `true`, `Button` has `aria-disabled` attribute set to `true`, but not `disabled`.
  +
  <!-- eslint-disable no-alert -->
  +
  ```jsx
  import { Button } from "reakit/Button";
  @@ -70,6 +122,7 @@ function Example() {
  );
  }
  ```
  +
  This is useful when the presence of a `Button` is important enough so users can perceive it by tabbing.
  Learn more in [Accessibility](/docs/accessibility/).
  