import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { TextButtonWithIcon } from './text-button-with-icon.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta
  title="Components/Actions/Text Button With Icon"
  component={TextButtonWithIcon}
/>

# Text Button with Icon

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

The Text Button with Icon component renders an anchor tag with an Icon on the left or right side.

Unlike other button components in patchwork, it does not support an `onClick` event.

## Variants

<Canvas>
  <Story id="components-actions-text-button-with-icon--left-icon" />
  <Story id="components-actions-text-button-with-icon--right-icon" />
  <Story id="components-actions-text-button-with-icon--right-icon-with-on-click" />
</Canvas>

## Supported Property Mixins:

Spacing:

<Canvas>
  <Story id="components-actions-text-button-with-icon--mixins-spacing" />
</Canvas>

## Props

<FlowPropsTable ofComponent={TextButtonWithIcon} />

## 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/text-button-with-icon"
  type="github"
/>