アラート

利用可能な柔軟なアラートメッセージを使い、典型的なユーザーアクションに対して、コンテキストに応じたフィードバックメッセージを提供します。

例

アラートは任意の長さのテキストで利用でき、オプションで閉じるボタンも利用可能です。適切なスタイルを適用するには、8つのvariantのいずれかを使用してください。

結果

読み込み中...

ライブエディター

import Alert from 'react-bootstrap/Alert'; function BasicExample() { return ( <> {[ 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', ].map((variant) => ( <Alert key={variant} variant={variant}> This is a {variant} alert—check it out! </Alert> ))} </> ); } export default BasicExample;

import Alert from 'react-bootstrap/Alert';

function BasicExample() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark',
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          This is a {variant} alert—check it out!
        </Alert>
      ))}
    </>
  );
}

export default BasicExample;

支援技術への意味の伝達

色を使用して意味を追加すると、視覚的な表示のみが提供され、スクリーンリーダーなどの支援技術のユーザーには伝わりません。色で示される情報が、コンテンツ自体から（例：表示されるテキスト）、または.visually-hiddenクラスで隠された追加のテキストなどの代替手段によって含まれていることを確認してください。

リンク

リンクの場合は、<Alert.Link>コンポーネントを使用して、任意のアラート内に一致する色のリンクを提供します。

結果

読み込み中...

ライブエディター

import Alert from 'react-bootstrap/Alert'; function LinksExample() { return ( <> {[ 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', ].map((variant) => ( <Alert key={variant} variant={variant}> This is a {variant} alert with{' '} <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like. </Alert> ))} </> ); } export default LinksExample;

import Alert from 'react-bootstrap/Alert';

function LinksExample() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark',
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          This is a {variant} alert with{' '}
          <Alert.Link href="#">an example link</Alert.Link>. Give it a click if
          you like.
        </Alert>
      ))}
    </>
  );
}

export default LinksExample;

追加コンテンツ

アラートには、好きなコンテンツを含めることができます。ヘッダー、段落、区切り線など、自由に使いましょう。

結果

読み込み中...

ライブエディター

import Alert from 'react-bootstrap/Alert'; function AdditionalContentExample() { return ( <Alert variant="success"> <Alert.Heading>Hey, nice to see you</Alert.Heading> <p> Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. </p> <hr /> <p className="mb-0"> Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </p> </Alert> ); } export default AdditionalContentExample;

import Alert from 'react-bootstrap/Alert';

function AdditionalContentExample() {
  return (
    <Alert variant="success">
      <Alert.Heading>Hey, nice to see you</Alert.Heading>
      <p>
        Aww yeah, you successfully read this important alert message. This
        example text is going to run a bit longer so that you can see how
        spacing within an alert works with this kind of content.
      </p>
      <hr />
      <p className="mb-0">
        Whenever you need to, be sure to use margin utilities to keep things
        nice and tidy.
      </p>
    </Alert>
  );
}

export default AdditionalContentExample;

閉じる

アラートに機能する閉じるボタンを追加するには、dismissibleプロパティを追加します。

結果

読み込み中...

ライブエディター

import { useState } from 'react'; import Alert from 'react-bootstrap/Alert'; import Button from 'react-bootstrap/Button'; function AlertDismissibleExample() { const [show, setShow] = useState(true); if (show) { return ( <Alert variant="danger" onClose={() => setShow(false)} dismissible> <Alert.Heading>Oh snap! You got an error!</Alert.Heading> <p> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> </Alert> ); } return <Button onClick={() => setShow(true)}>Show Alert</Button>; } export default AlertDismissibleExample;

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

function AlertDismissibleExample() {
  const [show, setShow] = useState(true);

  if (show) {
    return (
      <Alert variant="danger" onClose={() => setShow(false)} dismissible>
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
        <p>
          Change this and that and try again. Duis mollis, est non commodo
          luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
          Cras mattis consectetur purus sit amet fermentum.
        </p>
      </Alert>
    );
  }
  return <Button onClick={() => setShow(true)}>Show Alert</Button>;
}

export default AlertDismissibleExample;

より複雑なアラートを構築したい場合に役立つ、視覚的な状態を直接制御することもできます。

結果

読み込み中...

ライブエディター

import { useState } from 'react'; import Alert from 'react-bootstrap/Alert'; import Button from 'react-bootstrap/Button'; function AlertDismissible() { const [show, setShow] = useState(true); return ( <> <Alert show={show} variant="success"> <Alert.Heading>My Alert</Alert.Heading> <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> <hr /> <div className="d-flex justify-content-end"> <Button onClick={() => setShow(false)} variant="outline-success"> Close me </Button> </div> </Alert> {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>} </> ); } export default AlertDismissible;

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

function AlertDismissible() {
  const [show, setShow] = useState(true);

  return (
    <>
      <Alert show={show} variant="success">
        <Alert.Heading>My Alert</Alert.Heading>
        <p>
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
          lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
          fermentum.
        </p>
        <hr />
        <div className="d-flex justify-content-end">
          <Button onClick={() => setShow(false)} variant="outline-success">
            Close me
          </Button>
        </div>
      </Alert>

      {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
    </>
  );
}

export default AlertDismissible;

API

Alert

AlertHeading

AlertLink