import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Button } from './Button';

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

# Button

## Primary

Used for "call to action", i.e. triggering the main action. There should never be more than one on a page. If you need multiple buttons for different actions, decide which action is the most important and make that the primary `Button`. All other `Button` components should be secondary.

If there is no primary action, all `Button` components should be secondary.

<Preview>
  <div>
    <Button variant="primary" size="sm" renderAs="button" style={{ margin: '5px' }}>
      Small
    </Button>
    <Button variant="primary" size="md" renderAs="button" style={{ margin: '5px' }}>
      Medium
    </Button>
    <Button variant="primary" size="lg" renderAs="button" style={{ margin: '5px' }}>
      Large
    </Button>
  </div>
</Preview>

## Secondary

The secondary `Button` is the default button style and can trigger various actions. How it is used depends on its surroundings:

1. When next to the primary `Button`, the Secondary style can for example be used for "Cancel" or "Abort" actions. 
2. When there is no main important action on a given page, all `Button` components should use the secondary style.

<Preview>
  <div>
    <Button variant="secondary" size="sm" renderAs="button" style={{ margin: '5px' }}>
      Small
    </Button>
    <Button variant="secondary" size="md" renderAs="button" style={{ margin: '5px' }}>
      Medium
    </Button>
    <Button variant="secondary" size="lg" renderAs="button" style={{ margin: '5px' }}>
      Large
    </Button>
  </div>
</Preview>

## Destructive

Used for triggering a removing or deleting action. Because of its dominant coloring, it should be used sparingly. If you need multiple Destructive `Button` components in one view, we recommend using a secondary `Button` or Link variant instead and only use the Destructive variant to double confirm.

<Preview>
  <div>
    <Button variant="destructive" size="sm" renderAs="button" style={{ margin: '5px' }}>
      Small
    </Button>
    <Button variant="destructive" size="md" renderAs="button" style={{ margin: '5px' }}>
      Medium
    </Button>
    <Button variant="destructive" size="lg" renderAs="button" style={{ margin: '5px' }}>
      Large
    </Button>
  </div>
</Preview>

## Link

Used for hyperlinks.

<Preview>
  <div>
    <Button href="/" variant="link" size="sm" renderAs="button" style={{ margin: '5px' }}>
      Small
    </Button>
    <Button href="/" variant="link" size="md" renderAs="button" style={{ margin: '5px' }}>
      Medium
    </Button>
    <Button href="/" variant="link" size="lg" renderAs="button" style={{ margin: '5px' }}>
      Large
    </Button>
  </div>
</Preview>

<Props of={Button} />