import rules, {hrefRules} from './buttonLite.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>

### Usage

#### Code examples

- with `href`

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

- with `onClick`

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

- with an icon

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

- loading state with an accessible information

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