import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { NextButton } from './next-button.component';
import { Box } from '../../../primitives/box';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Components/Actions/Next Button" component={NextButton} />

# Next Button

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

Next button for wizards.

## With visible children

<Canvas>
  <Box stacked="row" align="end">
    <Story id="components-actions-next-button--default" />
    <Story id="components-actions-next-button--loading" />
    <Story id="components-actions-next-button--disabled" />
  </Box>
</Canvas>

## With aria-label

<Canvas>
  <Box stacked="row" align="end">
    <Story id="components-actions-next-button--hidden-label" />
    <Story id="components-actions-next-button--hidden-label-loading" />
    <Story id="components-actions-next-button--hidden-label-disabled" />
  </Box>
</Canvas>

## Supported Property Mixins:

Margin-only spacing:

<Canvas>
  <Story id="components-actions-next-button--mixins-margin-only-spacing" />
</Canvas>

## Props

<FlowPropsTable ofComponent={NextButton} />

## 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/next-button"
  type="github"
/>