125k

Button Group

PreviousNext

関連するボタンを一貫したスタイルでグループ化するコンテナー。

BaseRadixReact Aria
"use client"

import * as React from "react"

インストール

pnpm dlx shadcn@latest add button-group

使用法

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 と ToggleGroup の比較

  • アクションを実行するボタンをグループ化する場合は、ButtonGroup コンポーネントを使用します。
  • 状態を切り替えるボタンをグループ化する場合は、ToggleGroup コンポーネントを使用します。

方向

ボタン グループのレイアウトを変更するには、orientation プロップを設定します。

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

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

サイズ

個々のボタンの size プロップを使用してボタンのサイズを制御します。

import { PlusIcon } from "lucide-react"

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

ネスト

<ButtonGroup> コンポーネントをネストして、間隔をあけてボタン グループを作成します。

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

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

区切り

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

バリアント outline のボタンには境界線があるため、セパレータは必要ありません。他のバリアントでは、視覚的な階層を改善するためにセパレーターを使用することをお勧めします。

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

分割

ButtonGroupSeparator で区切られた 2 つのボタンを追加して、分割ボタン グループを作成します。

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

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

入力

Input コンポーネントをボタンでラップします。

import { SearchIcon } from "lucide-react"

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

入力グループ

InputGroup コンポーネントをラップして、複雑な入力レイアウトを作成します。

"use client"

import * as React from "react"

ドロップダウン メニュー

DropdownMenu コンポーネントを使用して分割ボタン グループを作成します。

"use client"

import {

選択

Select コンポーネントとペアリングします。

"use client"

import * as React from "react"

ポップオーバー

Popover コンポーネントと一緒に使用します。

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

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

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import * as React from "react"

API リファレンス

ButtonGroup

ButtonGroup コンポーネントは、関連するボタンを一貫したスタイルでグループ化するコンテナーです。

プロップタイプデフォルト
orientation"horizontal" | "vertical""horizontal"
<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

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

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

ButtonGroupSeparator

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

プロップタイプデフォルト
orientation"horizontal" | "vertical""vertical"
<ButtonGroup>
  <Button>Button 1</Button>
  <ButtonGroupSeparator />
  <Button>Button 2</Button>
</ButtonGroup>

ButtonGroupText

このコンポーネントを使用して、ボタン グループ内のテキストを表示します。

プロップタイプデフォルト
renderbooleanfalse
<ButtonGroup>
  <ButtonGroupText>Text</ButtonGroupText>
  <Button>Button</Button>
</ButtonGroup>

render プロップを使用して、カスタム コンポーネントをテキスト (ラベルなど) としてレンダリングします。

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