import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, select } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'
import CloseButton from './'

<Meta
  title="Components/Buttons/CloseButton"
  component={CloseButton}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A7564',
    },
  }}
/>

# CloseButton

Provides the closing action typically used in UI like Modals.

<Canvas>
  <Story name="default">
    <CloseButton
      onClick={action('click')}
      seamless={boolean('seamless', true)}
      size={select(
        'size',
        {
          lg: 'md',
          md: 'sm',
          sm: 'xs',
        },
        'md'
      )}
    />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: modal, tags

<br />
<br />

### Props

<ArgsTable of={CloseButton} />
