閉じるボタン

モーダルやアラートなど、コンテンツを閉じるための汎用的な閉じるボタンです。

例

結果

読み込み中…

ライブエディター

import CloseButton from 'react-bootstrap/CloseButton'; function BasicExample() { return <CloseButton />; } export default BasicExample;

import CloseButton from 'react-bootstrap/CloseButton';

function BasicExample() {
  return <CloseButton />;
}

export default BasicExample;

無効状態

Bootstrapは、ユーザー操作を防止するために、無効な閉じるボタンに関連するスタイルを追加します。

結果

読み込み中…

ライブエディター

import CloseButton from 'react-bootstrap/CloseButton'; function DisabledExample() { return <CloseButton disabled />; } export default DisabledExample;

import CloseButton from 'react-bootstrap/CloseButton';

function DisabledExample() {
  return <CloseButton disabled />;
}

export default DisabledExample;

バリアント

デフォルトの暗い色を白に変更するには、variant="white"を使用します。

ご注意！

Bootstrap v5.3.0でカラーモードが導入されたことに伴い、コンポーネントのダークバリアントは非推奨となりました。variant="white"を追加する代わりに、ルート要素、親コンテナ、またはコンポーネント自体にdata-bs-theme="dark"を設定してください。

結果

読み込み中…

ライブエディター

import CloseButton from 'react-bootstrap/CloseButton'; function VariantsExample() { return ( <div data-bs-theme="dark" className='bg-dark p-2'> <CloseButton /> <CloseButton disabled /> </div> ); } export default VariantsExample;

import CloseButton from 'react-bootstrap/CloseButton';

function VariantsExample() {
  return (
    <div data-bs-theme="dark" className='bg-dark p-2'>
      <CloseButton />
      <CloseButton disabled />
    </div>
  );
}

export default VariantsExample;

アクセシビリティ

閉じるボタンコンポーネントのアクセシビリティを最大限に確保するには、スクリーンリーダー用の関連テキストを提供することをお勧めします。以下の例では、aria-labelプロパティを使用して、このコンポーネントのアクセシブルな使用方法を示しています。

結果

読み込み中…

ライブエディター

import CloseButton from 'react-bootstrap/CloseButton'; function LabelledExample() { return <CloseButton aria-label="Hide" />; } export default LabelledExample;

import CloseButton from 'react-bootstrap/CloseButton';

function LabelledExample() {
  return <CloseButton aria-label="Hide" />;
}

export default LabelledExample;

API

CloseButton