ボタングループ

一連のボタンを一行にまとめて表示したり、縦列に積み重ねて表示します。

基本例

一連の<Button>を<ButtonGroup>で囲みます。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; function BasicExample() { return ( <ButtonGroup aria-label="Basic example"> <Button variant="secondary">Left</Button> <Button variant="secondary">Middle</Button> <Button variant="secondary">Right</Button> </ButtonGroup> ); } export default BasicExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';

function BasicExample() {
  return (
    <ButtonGroup aria-label="Basic example">
      <Button variant="secondary">Left</Button>
      <Button variant="secondary">Middle</Button>
      <Button variant="secondary">Right</Button>
    </ButtonGroup>
  );
}

export default BasicExample;

ボタンツールバー

より複雑なコンポーネントのために、複数の<ButtonGroup>を<ButtonToolbar>にまとめます。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import ButtonToolbar from 'react-bootstrap/ButtonToolbar'; function ToolbarBasicExample() { return ( <ButtonToolbar aria-label="Toolbar with button groups"> <ButtonGroup className="me-2" aria-label="First group"> <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '} <Button>4</Button> </ButtonGroup> <ButtonGroup className="me-2" aria-label="Second group"> <Button>5</Button> <Button>6</Button> <Button>7</Button> </ButtonGroup> <ButtonGroup aria-label="Third group"> <Button>8</Button> </ButtonGroup> </ButtonToolbar> ); } export default ToolbarBasicExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';

function ToolbarBasicExample() {
  return (
    <ButtonToolbar aria-label="Toolbar with button groups">
      <ButtonGroup className="me-2" aria-label="First group">
        <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}
        <Button>4</Button>
      </ButtonGroup>
      <ButtonGroup className="me-2" aria-label="Second group">
        <Button>5</Button> <Button>6</Button> <Button>7</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Third group">
        <Button>8</Button>
      </ButtonGroup>
    </ButtonToolbar>
  );
}

export default ToolbarBasicExample;

ツールバーでは、入力グループとボタングループを自由に組み合わせることができます。上記の例と同様に、適切に配置するためにいくつかのユーティリティが必要になる可能性があります。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import ButtonToolbar from 'react-bootstrap/ButtonToolbar'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function ToolbarExample() { return ( <> <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups"> <ButtonGroup className="me-2" aria-label="First group"> <Button variant="secondary">1</Button>{' '} <Button variant="secondary">2</Button>{' '} <Button variant="secondary">3</Button>{' '} <Button variant="secondary">4</Button> </ButtonGroup> <InputGroup> <InputGroup.Text id="btnGroupAddon">@</InputGroup.Text> <Form.Control type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" /> </InputGroup> </ButtonToolbar> <ButtonToolbar className="justify-content-between" aria-label="Toolbar with Button groups" > <ButtonGroup aria-label="First group"> <Button variant="secondary">1</Button>{' '} <Button variant="secondary">2</Button>{' '} <Button variant="secondary">3</Button>{' '} <Button variant="secondary">4</Button> </ButtonGroup> <InputGroup> <InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text> <Form.Control type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" /> </InputGroup> </ButtonToolbar> </> ); } export default ToolbarExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function ToolbarExample() {
  return (
    <>
      <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">
        <ButtonGroup className="me-2" aria-label="First group">
          <Button variant="secondary">1</Button>{' '}
          <Button variant="secondary">2</Button>{' '}
          <Button variant="secondary">3</Button>{' '}
          <Button variant="secondary">4</Button>
        </ButtonGroup>
        <InputGroup>
          <InputGroup.Text id="btnGroupAddon">@</InputGroup.Text>
          <Form.Control
            type="text"
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon"
          />
        </InputGroup>
      </ButtonToolbar>

      <ButtonToolbar
        className="justify-content-between"
        aria-label="Toolbar with Button groups"
      >
        <ButtonGroup aria-label="First group">
          <Button variant="secondary">1</Button>{' '}
          <Button variant="secondary">2</Button>{' '}
          <Button variant="secondary">3</Button>{' '}
          <Button variant="secondary">4</Button>
        </ButtonGroup>
        <InputGroup>
          <InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text>
          <Form.Control
            type="text"
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon2"
          />
        </InputGroup>
      </ButtonToolbar>
    </>
  );
}

export default ToolbarExample;

サイズ

グループ内のすべてのボタンにボタンのサイズプロパティを適用する代わりに、<ButtonGroup>にsizeプロパティを追加するだけです。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; function SizesExample() { return ( <> <ButtonGroup size="lg" className="mb-2"> <Button>Left</Button> <Button>Middle</Button> <Button>Right</Button> </ButtonGroup> <br /> <ButtonGroup className="mb-2"> <Button>Left</Button> <Button>Middle</Button> <Button>Right</Button> </ButtonGroup> <br /> <ButtonGroup size="sm"> <Button>Left</Button> <Button>Middle</Button> <Button>Right</Button> </ButtonGroup> </> ); } export default SizesExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';

function SizesExample() {
  return (
    <>
      <ButtonGroup size="lg" className="mb-2">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
      <br />
      <ButtonGroup className="mb-2">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
      <br />
      <ButtonGroup size="sm">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </>
  );
}

export default SizesExample;

ネスト

<ButtonGroup>内には、<DropdownButton>などの他のボタンの種類を配置できます。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Dropdown from 'react-bootstrap/Dropdown'; function NestedExample() { return ( <ButtonGroup> <Button>1</Button> <Button>2</Button> <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown"> <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item> <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item> </DropdownButton> </ButtonGroup> ); } export default NestedExample;

import Button from 'react-bootstrap/Button';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

function NestedExample() {
  return (
    <ButtonGroup>
      <Button>1</Button>
      <Button>2</Button>

      <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown">
        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
      </DropdownButton>
    </ButtonGroup>
  );
}

export default NestedExample;

垂直方向のバリエーション

<ButtonGroup>にverticalを追加することで、ボタンのセットを水平方向ではなく垂直方向に積み重ねて表示します。**分割ボタンのドロップダウンはここでサポートされていません。**

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import Dropdown from 'react-bootstrap/Dropdown'; import DropdownButton from 'react-bootstrap/DropdownButton'; function VerticalExample() { return ( <ButtonGroup vertical> <Button>Button</Button> <Button>Button</Button> <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-1" > <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item> <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item> </DropdownButton> <Button>Button</Button> <Button>Button</Button> <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-2" > <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item> <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item> </DropdownButton> <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-3" > <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item> <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item> </DropdownButton> </ButtonGroup> ); } export default VerticalExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

function VerticalExample() {
  return (
    <ButtonGroup vertical>
      <Button>Button</Button>
      <Button>Button</Button>

      <DropdownButton
        as={ButtonGroup}
        title="Dropdown"
        id="bg-vertical-dropdown-1"
      >
        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
      </DropdownButton>

      <Button>Button</Button>
      <Button>Button</Button>

      <DropdownButton
        as={ButtonGroup}
        title="Dropdown"
        id="bg-vertical-dropdown-2"
      >
        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
      </DropdownButton>

      <DropdownButton
        as={ButtonGroup}
        title="Dropdown"
        id="bg-vertical-dropdown-3"
      >
        <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
        <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
      </DropdownButton>
    </ButtonGroup>
  );
}

export default VerticalExample;

API

ButtonGroup

ButtonToolbar