# ButtonGroup

The Button Group component arranges multiple buttons in a horizontal or vertical stack, allowing users to group related actions together. It provides a cohesive and organized way to present multiple buttons, ensuring consistent spacing and alignment.

## Overview

```tsx
import { Button } from 'welcome-ui/Button'
import { ButtonGroup } from 'welcome-ui/ButtonGroup'

const Example = () => {
  return (
    <ButtonGroup>
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
      <Button>Last</Button>
    </ButtonGroup>
  )
}

export default Example
```

## Examples

### Overload

`ButtonGroup` overloads the child components properties.

```tsx
import { Button } from 'welcome-ui/Button'
import { ButtonGroup } from 'welcome-ui/ButtonGroup'

const Example = () => {
  return (
    <ButtonGroup size="sm" variant="tertiary">
      <Button>First</Button>
      <Button variant="secondary">Second</Button>
      <Button size="md" variant="tertiary">
        Third
      </Button>
      <Button variant="tertiary">Last</Button>
    </ButtonGroup>
  )
}

export default Example
```

## Props

### ButtonGroup

```tsx
interface ButtonGroupProps {
  /** Disable all your buttons components */
  disabled?: boolean
  size?: 'xs' | 'sm' | 'md' | 'lg'
  variant?: 'ghost' | 'primary' | 'secondary' | 'tertiary'
}
```