import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';

import Button from './';

<Meta title="Common/Button (MDX)" component={Button} />

# Button

A button is used to perform an action.

<Preview>
  <Story name="All features">
    <Button
      disabled={boolean('disabled', false)}
      type="submit"
      label={text('label', 'submit')}
    >
      {text('children', 'this is the button')}
    </Button>
  </Story>
  <Story name="Submit button">
    <Button type="submit" label="submit" onClick={action('onClick')}>This is a submit button</Button>
  </Story>
  <Story name="Primary button">
    <Button label="Log In" onClick={action('onClick')}>Log In</Button>
  </Story>
  <Story name="Disabled">
    <Button disabled label="Log In" onClick={action('onClick')}>Log In</Button>
  </Story>
</Preview>