import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { UnstyledButton } from './unstyled-button.component';
import { FlowPropsTable, ExternalReferenceLink } from '../../../utils';

<Meta title="Unstyled Button" component={UnstyledButton} />

# Unstyled Button

The unstyled button should not cause any stylistic overrides for the child component(s).

Wrap anything in this component and provide an `onClick` handler.

It behaves like a normal React button where the callback is called with one argument `SyntheticEvent<HTMLButtonElement>`.

## Default

<Preview withToolbar>
  <Story id="unstyled-button--default" />
</Preview>

## With Border Radius

<Preview withToolbar>
  <Story id="unstyled-button--border-radius" />
</Preview>

## Focus Styles

<Preview withToolbar>
  <Story id="unstyled-button--focus-styles" />
</Preview>

## Dark Background Focus Styles

<Preview withToolbar>
  <Story id="unstyled-button--dark-background-focus-styles" />
</Preview>

## Props

<FlowPropsTable ofComponent={UnstyledButton} />

## External Reference

<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/behaviors/unstyled-button"
  type="github"
/>
