import { Meta, Canvas, ArgTypes, Unstyled } from '@storybook/blocks';
import { Button, LinkButton } from './Button';
import { Alert } from '../Alert/Alert';
import { ExampleFrame } from '../../utils/storybook/ExampleFrame';

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

# Button

When using a button please always follow a11y rules (e.g. W3C Recommendation [3.3.2 Labels or instructions](https://www.w3.org/TR/WCAG21/#labels-or-instructions)) and make sure the context in which the button is located is also communicated by screen readers.

## 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.

<ExampleFrame>
  <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>
</ExampleFrame>

## 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.

<ExampleFrame>
  <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>
</ExampleFrame>

## 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.

<ExampleFrame>
  <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>
</ExampleFrame>

## Text

<ExampleFrame>
  <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>
</ExampleFrame>

## Links

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

<ExampleFrame>
  <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>
</ExampleFrame>

## Props

<ArgTypes of={Button} />
