import {
  ArgsTable,
  Canvas,
  Meta,
  Source,
  Story
} from '@storybook/addon-docs/blocks';
import Button from 'components/Button';
import ButtonGroup from 'components/ButtonGroup';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';

<Meta title="Components API/ButtonGroup" component={ButtonGroup} />

# ButtonGroup

Acts as a container for buttons.

<Canvas>
  <Story name="ButtonGroup">
    <ButtonGroup>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </ButtonGroup>
  </Story>
</Canvas>

<Source code="import { ButtonGroup } from 'cwb-react';" />

## Usage

You can configure the direction of a ButtonGroup. ButtonGroups serve as a shortcut to creating button containers with the correct spacing.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <ButtonGroup direction="column">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </ButtonGroup>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<ButtonGroup direction="column">\n' +
        '  <Button>Button 1</Button>\n' +
        '  <Button>Button 2</Button>\n' +
        '</ButtonGroup>'
      }
    />
  </div>
</ThemeProvider>

## Props

<ArgsTable />