ボタン

フォーム、ダイアログなどでアクションを行う際に、Bootstrapのカスタムボタンスタイルを使用します。複数のサイズ、状態などをサポートしています。

例

利用可能なボタンスタイルの種類のいずれかを使用して、すぐにスタイル設定されたボタンを作成できます。variantプロップを変更するだけです。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; function TypesExample() { return ( <> <Button variant="primary">Primary</Button>{' '} <Button variant="secondary">Secondary</Button>{' '} <Button variant="success">Success</Button>{' '} <Button variant="warning">Warning</Button>{' '} <Button variant="danger">Danger</Button>{' '} <Button variant="info">Info</Button>{' '} <Button variant="light">Light</Button>{' '} <Button variant="dark">Dark</Button> <Button variant="link">Link</Button> </> ); } export default TypesExample;

import Button from 'react-bootstrap/Button';

function TypesExample() {
  return (
    <>
      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}
      <Button variant="light">Light</Button>{' '}
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

export default TypesExample;

アウトラインボタン

より軽い印象にするために、ボタンには背景色が無いoutline-*バリアントも用意されています。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; function OutlineTypesExample() { return ( <> <Button variant="outline-primary">Primary</Button>{' '} <Button variant="outline-secondary">Secondary</Button>{' '} <Button variant="outline-success">Success</Button>{' '} <Button variant="outline-warning">Warning</Button>{' '} <Button variant="outline-danger">Danger</Button>{' '} <Button variant="outline-info">Info</Button>{' '} <Button variant="outline-light">Light</Button>{' '} <Button variant="outline-dark">Dark</Button> </> ); } export default OutlineTypesExample;

import Button from 'react-bootstrap/Button';

function OutlineTypesExample() {
  return (
    <>
      <Button variant="outline-primary">Primary</Button>{' '}
      <Button variant="outline-secondary">Secondary</Button>{' '}
      <Button variant="outline-success">Success</Button>{' '}
      <Button variant="outline-warning">Warning</Button>{' '}
      <Button variant="outline-danger">Danger</Button>{' '}
      <Button variant="outline-info">Info</Button>{' '}
      <Button variant="outline-light">Light</Button>{' '}
      <Button variant="outline-dark">Dark</Button>
    </>
  );
}

export default OutlineTypesExample;

ボタンタグ

通常、<Button>コンポーネントはHTMLの<button>要素をレンダリングします。ただし、必要なものを何でもレンダリングできます。hrefプロップを追加すると、自動的に<a />要素をレンダリングします。asプロップを使用して、任意の要素をレンダリングできます。React Bootstrapは適切なARIAロールを自動的に処理します。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; function TagTypesExample() { return ( <> <Button href="#">Link</Button> <Button type="submit">Button</Button>{' '} <Button as="input" type="button" value="Input" />{' '} <Button as="input" type="submit" value="Submit" />{' '} <Button as="input" type="reset" value="Reset" /> </> ); } export default TagTypesExample;

import Button from 'react-bootstrap/Button';

function TagTypesExample() {
  return (
    <>
      <Button href="#">Link</Button> <Button type="submit">Button</Button>{' '}
      <Button as="input" type="button" value="Input" />{' '}
      <Button as="input" type="submit" value="Submit" />{' '}
      <Button as="input" type="reset" value="Reset" />
    </>
  );
}

export default TagTypesExample;

サイズ

より大きくしたり小さくしたりしたいですか？追加のサイズとしてsize="lg"、size="sm"を追加してください。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; function SizesExample() { return ( <> <div className="mb-2"> <Button variant="primary" size="lg"> Large button </Button>{' '} <Button variant="secondary" size="lg"> Large button </Button> </div> <div> <Button variant="primary" size="sm"> Small button </Button>{' '} <Button variant="secondary" size="sm"> Small button </Button> </div> </> ); } export default SizesExample;

import Button from 'react-bootstrap/Button';

function SizesExample() {
  return (
    <>
      <div className="mb-2">
        <Button variant="primary" size="lg">
          Large button
        </Button>{' '}
        <Button variant="secondary" size="lg">
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm">
          Small button
        </Button>{' '}
        <Button variant="secondary" size="sm">
          Small button
        </Button>
      </div>
    </>
  );
}

export default SizesExample;

ブロックボタン

Bootstrap 4のような、全幅の「ブロックボタン」のレスポンシブなスタックを、表示とギャップのユーティリティを組み合わせて作成します。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; function BlockExample() { return ( <div className="d-grid gap-2"> <Button variant="primary" size="lg"> Block level button </Button> <Button variant="secondary" size="lg"> Block level button </Button> </div> ); } export default BlockExample;

import Button from 'react-bootstrap/Button';

function BlockExample() {
  return (
    <div className="d-grid gap-2">
      <Button variant="primary" size="lg">
        Block level button
      </Button>
      <Button variant="secondary" size="lg">
        Block level button
      </Button>
    </div>
  );
}

export default BlockExample;

アクティブ状態

ボタンのアクティブ状態を設定するには、コンポーネントのactiveプロップを設定します。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; function ActiveExample() { return ( <> <Button variant="primary" size="lg" active> Primary button </Button>{' '} <Button variant="secondary" size="lg" active> Button </Button> </> ); } export default ActiveExample;

import Button from 'react-bootstrap/Button';

function ActiveExample() {
  return (
    <>
      <Button variant="primary" size="lg" active>
        Primary button
      </Button>{' '}
      <Button variant="secondary" size="lg" active>
        Button
      </Button>
    </>
  );
}

export default ActiveExample;

無効状態

disabledプロップを追加して、ボタンを非アクティブに見せましょう。

結果

読み込み中…

ライブエディタ

import Button from 'react-bootstrap/Button'; function DisabledExample() { return ( <> <Button variant="primary" size="lg" disabled> Primary button </Button>{' '} <Button variant="secondary" size="lg" disabled> Button </Button>{' '} <Button href="#" variant="secondary" size="lg" disabled> Link </Button> </> ); } export default DisabledExample;

import Button from 'react-bootstrap/Button';

function DisabledExample() {
  return (
    <>
      <Button variant="primary" size="lg" disabled>
        Primary button
      </Button>{' '}
      <Button variant="secondary" size="lg" disabled>
        Button
      </Button>{' '}
      <Button href="#" variant="secondary" size="lg" disabled>
        Link
      </Button>
    </>
  );
}

export default DisabledExample;

注意！<a>要素は、disabled属性を自然にサポートしていません。サポートするブラウザでは、point-events: noneスタイルで処理されますが、すべてのブラウザでまだサポートされているわけではありません。

React Bootstrapは、レンダリングされた要素に関係なく、すべてのonClickハンドラの起動を防ぎます。

ボタンの読み込み状態

ボタンから非同期アクションをアクティブにする場合は、読み込み状態に関するフィードバックをユーザーに提供することが良いUXパターンです。これは、以下の例のように、状態の変化から<Button />のプロップを更新することで簡単に実現できます。

結果

読み込み中…

ライブエディタ

import { useEffect, useState } from 'react'; import Button from 'react-bootstrap/Button'; function LoadingButton() { const [isLoading, setLoading] = useState(false); useEffect(() => { function simulateNetworkRequest() { return new Promise((resolve) => setTimeout(resolve, 2000)); } if (isLoading) { simulateNetworkRequest().then(() => { setLoading(false); }); } }, [isLoading]); const handleClick = () => setLoading(true); return ( <Button variant="primary" disabled={isLoading} onClick={!isLoading ? handleClick : null} > {isLoading ? 'Loading…' : 'Click to load'} </Button> ); } export default LoadingButton;

import { useEffect, useState } from 'react';
import Button from 'react-bootstrap/Button';

function LoadingButton() {
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    function simulateNetworkRequest() {
      return new Promise((resolve) => setTimeout(resolve, 2000));
    }

    if (isLoading) {
      simulateNetworkRequest().then(() => {
        setLoading(false);
      });
    }
  }, [isLoading]);

  const handleClick = () => setLoading(true);

  return (
    <Button
      variant="primary"
      disabled={isLoading}
      onClick={!isLoading ? handleClick : null}
    >
      {isLoading ? 'Loading…' : 'Click to load'}
    </Button>
  );
}

export default LoadingButton;

チェックボックス/ラジオボタン

ボタンを使用して、checkboxおよびradioフォーム要素のスタイルを設定することもできます。これは、HTMLフォーム内で適切に動作するトグルボタンが必要な場合に役立ちます。

結果

読み込み中…

ライブエディタ

import { useState } from 'react'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import ToggleButton from 'react-bootstrap/ToggleButton'; function ToggleButtonExample() { const [checked, setChecked] = useState(false); const [radioValue, setRadioValue] = useState('1'); const radios = [ { name: 'Active', value: '1' }, { name: 'Radio', value: '2' }, { name: 'Radio', value: '3' }, ]; return ( <> <ButtonGroup className="mb-2"> <ToggleButton id="toggle-check" type="checkbox" variant="secondary" checked={checked} value="1" onChange={(e) => setChecked(e.currentTarget.checked)} > Checked </ToggleButton> </ButtonGroup> <br /> <ButtonGroup className="mb-2"> {radios.map((radio, idx) => ( <ToggleButton key={idx} id={`radio-${idx}`} type="radio" variant="secondary" name="radio" value={radio.value} checked={radioValue === radio.value} onChange={(e) => setRadioValue(e.currentTarget.value)} > {radio.name} </ToggleButton> ))} </ButtonGroup> <br /> <ToggleButton className="mb-2" id="toggle-check" type="checkbox" variant="outline-primary" checked={checked} value="1" onChange={(e) => setChecked(e.currentTarget.checked)} > Checked </ToggleButton> <br /> <ButtonGroup> {radios.map((radio, idx) => ( <ToggleButton key={idx} id={`radio-${idx}`} type="radio" variant={idx % 2 ? 'outline-success' : 'outline-danger'} name="radio" value={radio.value} checked={radioValue === radio.value} onChange={(e) => setRadioValue(e.currentTarget.value)} > {radio.name} </ToggleButton> ))} </ButtonGroup> </> ); } export default ToggleButtonExample;

import { useState } from 'react';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ToggleButton from 'react-bootstrap/ToggleButton';

function ToggleButtonExample() {
  const [checked, setChecked] = useState(false);
  const [radioValue, setRadioValue] = useState('1');

  const radios = [
    { name: 'Active', value: '1' },
    { name: 'Radio', value: '2' },
    { name: 'Radio', value: '3' },
  ];

  return (
    <>
      <ButtonGroup className="mb-2">
        <ToggleButton
          id="toggle-check"
          type="checkbox"
          variant="secondary"
          checked={checked}
          value="1"
          onChange={(e) => setChecked(e.currentTarget.checked)}
        >
          Checked
        </ToggleButton>
      </ButtonGroup>
      <br />
      <ButtonGroup className="mb-2">
        {radios.map((radio, idx) => (
          <ToggleButton
            key={idx}
            id={`radio-${idx}`}
            type="radio"
            variant="secondary"
            name="radio"
            value={radio.value}
            checked={radioValue === radio.value}
            onChange={(e) => setRadioValue(e.currentTarget.value)}
          >
            {radio.name}
          </ToggleButton>
        ))}
      </ButtonGroup>
      <br />
      <ToggleButton
        className="mb-2"
        id="toggle-check"
        type="checkbox"
        variant="outline-primary"
        checked={checked}
        value="1"
        onChange={(e) => setChecked(e.currentTarget.checked)}
      >
        Checked
      </ToggleButton>
      <br />
      <ButtonGroup>
        {radios.map((radio, idx) => (
          <ToggleButton
            key={idx}
            id={`radio-${idx}`}
            type="radio"
            variant={idx % 2 ? 'outline-success' : 'outline-danger'}
            name="radio"
            value={radio.value}
            checked={radioValue === radio.value}
            onChange={(e) => setRadioValue(e.currentTarget.value)}
          >
            {radio.name}
          </ToggleButton>
        ))}
      </ButtonGroup>
    </>
  );
}

export default ToggleButtonExample;

上記はスタイルの処理を行います。しかし、各ラジオボタンまたはチェックボックスグループのchecked状態を手動で制御する必要があります。

チェック状態の管理をよりスムーズに行うには、<ButtonGroup>コンポーネントの代わりに<ToggleButtonGroup>を使用してください。このグループはフォームコンポーネントとして動作し、valueは、名前付きチェックボックスグループの選択されたvalueの配列、または同様に名前付けされたラジオグループの単一のトグルされたvalueになります。

非制御コンポーネント

結果

読み込み中…

ライブエディタ

import ToggleButton from 'react-bootstrap/ToggleButton'; import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'; function ToggleButtonGroupUncontrolled() { return ( <> <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2"> <ToggleButton id="tbg-check-1" value={1}> Checkbox 1 (pre-checked) </ToggleButton> <ToggleButton id="tbg-check-2" value={2}> Checkbox 2 </ToggleButton> <ToggleButton id="tbg-check-3" value={3}> Checkbox 3 (pre-checked) </ToggleButton> </ToggleButtonGroup> <br /> <ToggleButtonGroup type="radio" name="options" defaultValue={1}> <ToggleButton id="tbg-radio-1" value={1}> Radio 1 (pre-checked) </ToggleButton> <ToggleButton id="tbg-radio-2" value={2}> Radio 2 </ToggleButton> <ToggleButton id="tbg-radio-3" value={3}> Radio 3 </ToggleButton> </ToggleButtonGroup> </> ); } export default ToggleButtonGroupUncontrolled;

import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';

function ToggleButtonGroupUncontrolled() {
  return (
    <>
      <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="mb-2">
        <ToggleButton id="tbg-check-1" value={1}>
          Checkbox 1 (pre-checked)
        </ToggleButton>
        <ToggleButton id="tbg-check-2" value={2}>
          Checkbox 2
        </ToggleButton>
        <ToggleButton id="tbg-check-3" value={3}>
          Checkbox 3 (pre-checked)
        </ToggleButton>
      </ToggleButtonGroup>
      <br />
      <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
        <ToggleButton id="tbg-radio-1" value={1}>
          Radio 1 (pre-checked)
        </ToggleButton>
        <ToggleButton id="tbg-radio-2" value={2}>
          Radio 2
        </ToggleButton>
        <ToggleButton id="tbg-radio-3" value={3}>
          Radio 3
        </ToggleButton>
      </ToggleButtonGroup>
    </>
  );
}

export default ToggleButtonGroupUncontrolled;

制御コンポーネント

結果

読み込み中…

ライブエディタ

import { useState } from 'react'; import ToggleButton from 'react-bootstrap/ToggleButton'; import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'; function ToggleButtonGroupControlled() { const [value, setValue] = useState([1, 3]); /* * The second argument that will be passed to * `handleChange` from `ToggleButtonGroup` * is the SyntheticEvent object, but we are * not using it in this example so we will omit it. */ const handleChange = (val) => setValue(val); return ( <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}> <ToggleButton id="tbg-btn-1" value={1}> Option 1 </ToggleButton> <ToggleButton id="tbg-btn-2" value={2}> Option 2 </ToggleButton> <ToggleButton id="tbg-btn-3" value={3}> Option 3 </ToggleButton> </ToggleButtonGroup> ); } export default ToggleButtonGroupControlled;

import { useState } from 'react';
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';

function ToggleButtonGroupControlled() {
  const [value, setValue] = useState([1, 3]);

  /*
   * The second argument that will be passed to
   * `handleChange` from `ToggleButtonGroup`
   * is the SyntheticEvent object, but we are
   * not using it in this example so we will omit it.
   */
  const handleChange = (val) => setValue(val);

  return (
    <ToggleButtonGroup type="checkbox" value={value} onChange={handleChange}>
      <ToggleButton id="tbg-btn-1" value={1}>
        Option 1
      </ToggleButton>
      <ToggleButton id="tbg-btn-2" value={2}>
        Option 2
      </ToggleButton>
      <ToggleButton id="tbg-btn-3" value={3}>
        Option 3
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

export default ToggleButtonGroupControlled;

API

ボタン

ToggleButtonGroup

ToggleButton