import rules, {hrefRules, toggleRules} from './button.rules.a11y';

### Rules

<AccessibilityList rules={rules} />

#### Button with `href`

<AccessibilityList rules={hrefRules} />

<InfoBox>
  Element, that looks like a button, but cause the user agent to navigate to a
  new resource is a link and should meet the accessibility requirements for the
  link. More about it you can read in{' '}
  <a href="/docs/components-link--default-story#accessibility">
    the Link accessibility documentation
  </a>
  .
</InfoBox>

#### Button with `toggle`

<AccessibilityList rules={toggleRules} />

### Usage

#### Code examples

- with `href`

<!-- prettier-ignore -->
```jsx
<Button href="https://example.com/">
  Read more about our products
</Button>
```

- with `onClick`

<!-- prettier-ignore -->
```jsx
<Button onClick={onClick}>
  Send your comment
</Button>
```

- with an icon

```jsx
<Button
  icon={<Icon aria-hidden type="report_flag_outlined" color="adaptive" />}
  onClick={onClick}
>
  Report this question
</Button>
```

- iconOnly with an accessible name

```jsx
<Button
  iconOnly
  aria-label="Report this question"
  icon={<Icon aria-hidden type="report_flag_outlined" color="adaptive" />}
  onClick={onClick}
/>
```

- loading state with an accessible information

```jsx
<Button
  loading={isLoading}
  loadingAriaLive="assertive"
  loadingAriaLabel="Loading 10 more answers"
  onClick={onClick}
>
  Load more answers
</Button>
```

- toggle button

```jsx
<Button
  toggle="red"
  type="button"
  icon={<Icon aria-hidden type="heart" color="adaptive" />}
  aria-pressed="true"
  onClick={onClick}
>
  Thanks
</Button>
```