import { action } from '@storybook/addon-actions';
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { Button, ButtonRow } from '../src/index';

<Meta title="Components|Button" component={Button} />

# Button

<Props of={Button} />

## Basic button

<Story name="simple">
  <Button onClick={action('Clicked')}>Button</Button>
</Story>

## Different theming

<Story name="themes">
  <Button theme="success" onClick={action('Clicked')}>
    Button
  </Button>
</Story>

## Small

<Story name="small">
  <Button small onClick={action('Clicked')}>
    Button
  </Button>
</Story>

## Inverse

<Story name="inverse">
  <div style={{ background: '#000', display: 'inline-block', padding: '25px' }}>
    <Button inverse onClick={action('Clicked')}>
      Button
    </Button>
  </div>
</Story>

## Loading

<Story name="loading">
  <Button loading onClick={action('Clicked')}>
    Button
  </Button>
</Story>