import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Button } from './button.component';
import { FlowPropsTable, ExternalReferenceLink } from '../../../utils';

<Meta title="Buttons/Primary" component={Button} />

# Button

The button component renders a primary- or secondary- branded button in a range of sizes.

The button either renders a button element or a link element based on if an onClick or url respectively was provided to the button.

## Sizes

<Canvas withToolbar>
  <Story id="buttons-primary--sm" />
  <Story id="buttons-primary--md" />
</Canvas>

## States

<Canvas withToolbar>
  <Story id="buttons-primary--disabled" />
</Canvas>

## As Link

<Canvas withToolbar>
  <Story id="buttons-primary--as-link" />
</Canvas>

## Supported Layout Props:

Spacing:

<Canvas>
  <Story id="buttons-primary--mixins-spacing" />
</Canvas>

Stackee:

<Canvas>
  <Story id="buttons-primary--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={Button} />

## Accessibility notes

At least one of `href` and `onClick` must be provided for this component to be functional. If `href` is provided,
a styled `a` element will be rendered, otherwise a `button` element will be rendered.

If both props are provided, an `a` element will be rendered with both an `href` and `onClick` callback attached.

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A9"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/src/core/actions/button"
  type="github"
/>
