import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { SecondaryButton } from './secondary-button.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';
import { Box } from '../../../index';

<Meta title="Components/Actions/Secondary Button" component={SecondaryButton} />

# Secondary Button

- [Actions Accessibility
  Tips](/?path=/story/components-actions-accessibility-tips--page)

The SecondaryButton component is used for actions that are 'not the main action' of a piece of UI. They will almost always be used in conjunction with a primary button.

A classic example would be an "ok"/"cancel" type UI; "ok" would be a primary button and "cancel" would be a secondary button.

The `SecondaryButton` component either renders a button element or a link element based on whether a `href` prop is passed in.

<Canvas>
  <Box stacked="row" justify="space-around">
    <Story id="components-actions-secondary-button--as-link" />
    <Story id="components-actions-secondary-button--as-button" />
    <Story id="components-actions-secondary-button--as-button-loading" />
    <Story id="components-actions-secondary-button--as-button-disabled" />
  </Box>
</Canvas>

## Supported Property Mixins:

Spacing:

<Canvas>
  <Story id="components-actions-secondary-button--mixins-spacing" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-actions-secondary-button--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={SecondaryButton} />

## External Reference

<ExternalReferenceLink
  src="https://www.figma.com/file/r5zKXblbSt0b869OEcOWXu/Patchwork-Web?node-id=637%3A9"
  type="figma"
/>
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/src/core/actions/secondary-button"
  type="github"
/>