ButtonGroup

import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, Button } from '@caroainc/ui-components'

<ButtonGroup>
  <Button variant="outline">左</Button>
  <Button variant="outline">中央</Button>
  <Button variant="outline">右</Button>
</ButtonGroup>

<ButtonGroup orientation="horizontal">
  <Button variant="outline">項目1</Button>
  <Button variant="outline">項目2</Button>
  <Button variant="outline">項目3</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical">
  <Button variant="outline">項目1</Button>
  <Button variant="outline">項目2</Button>
  <Button variant="outline">項目3</Button>
</ButtonGroup>

<ButtonGroup>
  <ButtonGroupText>https://</ButtonGroupText>
  <Button variant="outline">example.com</Button>
</ButtonGroup>

<ButtonGroup>
  <Button variant="outline">保存</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">
    <Icon name="ChevronDown" size="sm" />
  </Button>
</ButtonGroup>

<ButtonGroup>
  <Button variant="outline" size="sm">
    <Icon name="Bold" size="sm" />
  </Button>
  <Button variant="outline" size="sm">
    <Icon name="Italic" size="sm" />
  </Button>
  <Button variant="outline" size="sm">
    <Icon name="Underline" size="sm" />
  </Button>
</ButtonGroup>

<ButtonGroup>
  <Button variant="outline" size="sm">
    <Icon name="LayoutGrid" size="sm" />
  </Button>
  <Button variant="outline" size="sm">
    <Icon name="List" size="sm" />
  </Button>
</ButtonGroup>

<ButtonGroup>
  <Button variant="outline" size="sm">
    <Icon name="ChevronLeft" size="sm" />
  </Button>
  <ButtonGroupText size="sm">1 / 10</ButtonGroupText>
  <Button variant="outline" size="sm">
    <Icon name="ChevronRight" size="sm" />
  </Button>
</ButtonGroup>