import { ArgsTable, Canvas, Story } from '@storybook/addon-docs/blocks';
import Button, { ButtonLabel } from './Button';

<Meta title="Forms/Button" component={Button} />

# Button

Presents the user with an action to take, such as a form submission or promotional call-to-action.

Use the `Button` component when presenting the user with an action that affects the current page, such as submitting a form or dismissing a modal. This component renders an HTML `<button>` tag.

Use the `ButtonLabel` component when you want a component that is styled like a button, without the `<button>` wrapper, e.g. for use in a link. This component renders a `<span>` tag only.

## Usage guidelines

- **Do** use the `Button` component for actions that change something on the page, such as form submissions or toggling content visibility.
- **Do** use the `ButtonLabel` component to link to another page or as an anchor link to a piece of content on the same page.
- **Do** use icons when needed using `props.children`
- **Do** use the primary variant for affirmative calls to action, such as agreeing to a confirmation or submitting a form.
- **Do** use the secondary variant for negative calls to action, such as declining a confirmation or cancelling an action.
- **Do not** use the Button component to link to another page, use `ButtonLabel` and wrap it in an `<a>` tag instead.
- **Do not** pass content into `props.children` that modifies the color, spacing, font size, font family, font weight, or font style of the label.
- **Do not** intentionally misuse primary and secondary variants to create UX dark patterns.

## Button props

<Canvas>
	<Story
		args={{
			children: 'Click me!',
		}}
		name="Default"
	>
		{args => <Button {...args} />}
	</Story>
</Canvas>

<ArgsTable of={Button} />

### ButtonLabel props

<Canvas>
	<Story
		args={{
			children: 'I am static text',
		}}
		name="Button label"
	>
		{args => <ButtonLabel {...args} />}
	</Story>
</Canvas>

<ArgsTable of={ButtonLabel} />


## Stories

### Secondary

<Canvas>
	<Story
		args={{
			children: 'Click me!',
			variant: 'secondary',
		}}
		name="Secondary"
	>
		{args => <Button {...args} />}
	</Story>
</Canvas>

### Loading

<Canvas>
	<Story
		args={{
			children: 'Ignored',
			loading: true,
		}}
		name="Loading"
	>
		{args => <Button {...args} />}
	</Story>
</Canvas>

### Warning

<Canvas>
	<Story
		args={{
			children: 'Be very careful',
			variant: 'warning',
		}}
		name="Warning"
	>
		{args => <Button {...args} />}
	</Story>
</Canvas>

### Inline

<Canvas>
	<Story
		args={{
			children: 'Click me!',
			inline: true,
		}}
		name="Inline"
	>
		{args => <Button {...args} />}
	</Story>
</Canvas>

### Inline warning

<Canvas>
	<Story
		args={{
			children: 'Be very careful',
			inline: true,
			variant: 'warning',
		}}
		name="Inline warning"
	>
		{args => <Button {...args} />}
	</Story>
</Canvas>