import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Button, LinkButton } 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" style={{ margin: '5px' }}>
      Small
    </Button>
    <Button variant="primary" size="md" style={{ margin: '5px' }}>
      Medium
    </Button>
    <Button variant="primary" size="lg" 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" style={{ margin: '5px' }}>
      Small
    </Button>
    <Button variant="secondary" size="md" style={{ margin: '5px' }}>
      Medium
    </Button>
    <Button variant="secondary" size="lg" 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" style={{ margin: '5px' }}>
      Small
    </Button>
    <Button variant="destructive" size="md" style={{ margin: '5px' }}>
      Medium
    </Button>
    <Button variant="destructive" size="lg" style={{ margin: '5px' }}>
      Large
    </Button>
  </div>
</Preview>

## Text

<Preview>
  <div>
    <Button fill="text" size="sm" style={{ margin: '5px' }}>
      Small
    </Button>
    <Button fill="text" size="md" style={{ margin: '5px' }}>
      Medium
    </Button>
    <Button fill="text" size="lg" style={{ margin: '5px' }}>
      Large
    </Button>
  </div>
</Preview>

<Props of={Button} />

## Links

To add an anchor that looks like a button use the `<LinkButton>` component and pass a href prop.

<Preview>
  <div>
    <LinkButton href="/" size="sm" style={{ margin: '5px' }}>
      Small
    </LinkButton>
    <LinkButton href="/" size="md" style={{ margin: '5px' }}>
      Medium
    </LinkButton>
    <LinkButton href="/" size="lg" style={{ margin: '5px' }}>
      Large
    </LinkButton>
  </div>
</Preview>
