ButtonGroup

インポート

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

個別サブパス（バンドルサイズを抑えたい場合。Button は /button-group には含まれないため別途importする）:

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

基本的な使い方

<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>

テキスト付きボタングループ

https://

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

ButtonGroupTextのサイズ

xssmdefaultlgxl

<ButtonGroupText size="xs">xs</ButtonGroupText>
<ButtonGroupText size="sm">sm</ButtonGroupText>
<ButtonGroupText size="default">default</ButtonGroupText>
<ButtonGroupText size="lg">lg</ButtonGroupText>
<ButtonGroupText size="xl">xl</ButtonGroupText>

セパレーター付き

<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>

ページネーション

1 / 10

<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>

Props

ButtonGroup

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	ボタングループの方向

ButtonGroupText

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl'`	`'default'`	テキストのサイズ
`asChild`	`boolean`	`false`	子要素をコンポーネントとして使用

ButtonGroupSeparator

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	セパレーターの方向
`decorative`	`boolean`	`true`	装飾目的かどうか

ButtonGroup

On this page