Button Group

PreviousNext

関連するボタンを一貫したスタイルでまとめるコンテナ。

"use client"

import * as React from "react"

インストール

pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/button-group.json

使い方

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"
<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

構成

ButtonGroup の構成:

ButtonGroup
├── Button or Input
├── ButtonGroupSeparator
└── ButtonGroupText

アクセシビリティ

  • ButtonGroup コンポーネントの role 属性は group に設定されています。
  • Tab でグループ内のボタンを移動できます。
  • aria-label または aria-labelledby でボタングループにラベルを付けてください。
<ButtonGroup aria-label="Button group">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

ButtonGroup vs ToggleGroup

  • アクションを実行するボタンをグループ化する場合は ButtonGroup を使います。
  • 状態をトグルするボタンをグループ化する場合は ToggleGroup を使います。

使用例

Orientation

orientation プロパティでボタングループのレイアウトを変更します。

import { MinusIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Size

個別ボタンの size プロパティでボタンのサイズを制御します。

import { PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Nested

<ButtonGroup> をネストして、間隔付きのボタングループを作成します。

import { AudioLinesIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Separator

ButtonGroupSeparator コンポーネントはグループ内のボタンを視覚的に分割します。

outline バリアントのボタンにはボーダーがあるためセパレーターは不要です。その他のバリアントにはセパレーターを追加すると視覚的な階層が明確になります。

import { Button } from "@/components/ui/button"
import {
  ButtonGroup,

Split

ButtonGroupSeparator で区切った2つのボタンでスプリットボタングループを作成します。

import { IconPlus } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

Input

ボタンと Input コンポーネントを組み合わせます。

import { SearchIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Input Group

InputGroup コンポーネントで複雑な入力レイアウトを作成します。

"use client"

import * as React from "react"

Dropdown Menu

DropdownMenu コンポーネントを使ったスプリットボタングループを作成します。

"use client"

import {

Select

Select コンポーネントと組み合わせます。

"use client"

import * as React from "react"

Popover

Popover コンポーネントと組み合わせます。

import { BotIcon, ChevronDownIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

RTL

"use client"

import * as React from "react"

API リファレンス

ButtonGroup

ButtonGroup コンポーネントは関連するボタンを一貫したスタイルでまとめるコンテナです。

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"
<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

複数のボタングループをネストして間隔付きの複雑なレイアウトを作成できます。詳細は nested の例を参照してください。

<ButtonGroup>
  <ButtonGroup />
  <ButtonGroup />
</ButtonGroup>

ButtonGroupSeparator

ButtonGroupSeparator コンポーネントはグループ内のボタンを視覚的に分割します。

PropTypeDefault
orientation"horizontal" | "vertical""vertical"
<ButtonGroup>
  <Button>Button 1</Button>
  <ButtonGroupSeparator />
  <Button>Button 2</Button>
</ButtonGroup>

ButtonGroupText

ボタングループ内にテキストを表示するためのコンポーネントです。

PropTypeDefault
asChildbooleanfalse
<ButtonGroup>
  <ButtonGroupText>Text</ButtonGroupText>
  <Button>Button</Button>
</ButtonGroup>

asChild プロパティを使ってカスタムコンポーネント（例: label）としてレンダリングできます。

import { ButtonGroupText } from "@/components/ui/button-group"
import { Label } from "@/components/ui/label"
 
export function ButtonGroupTextDemo() {
  return (
    <ButtonGroup>
      <ButtonGroupText asChild>
        <Label htmlFor="name">Text</Label>
      </ButtonGroupText>
      <Input placeholder="Type something here..." id="name" />
    </ButtonGroup>
  )
}