バッジ

バッジ、小さなカウント、ラベル コンポーネントのドキュメンテーションと例。

例

バッジは、相対的なフォントサイズと em 単位を使用して、直接の親要素のサイズに合わせて拡大縮小します。

結果

読み込み中...

ライブエディター

import Badge from 'react-bootstrap/Badge'; function BasicExample() { return ( <div> <h1> Example heading <Badge bg="secondary">New</Badge> </h1> <h2> Example heading <Badge bg="secondary">New</Badge> </h2> <h3> Example heading <Badge bg="secondary">New</Badge> </h3> <h4> Example heading <Badge bg="secondary">New</Badge> </h4> <h5> Example heading <Badge bg="secondary">New</Badge> </h5> <h6> Example heading <Badge bg="secondary">New</Badge> </h6> </div> ); } export default BasicExample;

import Badge from 'react-bootstrap/Badge';

function BasicExample() {
  return (
    <div>
      <h1>
        Example heading <Badge bg="secondary">New</Badge>
      </h1>
      <h2>
        Example heading <Badge bg="secondary">New</Badge>
      </h2>
      <h3>
        Example heading <Badge bg="secondary">New</Badge>
      </h3>
      <h4>
        Example heading <Badge bg="secondary">New</Badge>
      </h4>
      <h5>
        Example heading <Badge bg="secondary">New</Badge>
      </h5>
      <h6>
        Example heading <Badge bg="secondary">New</Badge>
      </h6>
    </div>
  );
}

export default BasicExample;

バッジはリンクやボタンの一部として使用して、カウンタを提供できます。

結果

読み込み中...

ライブエディター

import Badge from 'react-bootstrap/Badge'; import Button from 'react-bootstrap/Button'; function ButtonExample() { return ( <Button variant="primary"> Profile <Badge bg="secondary">9</Badge> <span className="visually-hidden">unread messages</span> </Button> ); } export default ButtonExample;

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

function ButtonExample() {
  return (
    <Button variant="primary">
      Profile <Badge bg="secondary">9</Badge>
      <span className="visually-hidden">unread messages</span>
    </Button>
  );
}

export default ButtonExample;

バッジがどのように使用されるかによっては、スクリーンリーダーや同様の補助技術を使用するユーザーを混乱させる可能性があります。バッジのスタイルは、それらの目的についての視覚的な手がかりを提供しますが、これらのユーザーには単にバッジの内容が表示されます。具体的な状況によっては、これらのバッジは文章、リンク、またはボタンの末尾にランダムに追加された単語や数字のように見える場合があります。コンテキストが明確でない場合は、視覚的に隠された追加のテキストを使用して追加のコンテキストを含めることを検討してください。

コンテキストのバリエーション

バッジの外観を変更するには、以下に示すいずれかの修飾子クラスを追加します。

結果

読み込み中...

ライブエディター

import Badge from 'react-bootstrap/Badge'; import Stack from 'react-bootstrap/Stack'; function VariationsExample() { return ( <Stack direction="horizontal" gap={2}> <Badge bg="primary">Primary</Badge> <Badge bg="secondary">Secondary</Badge> <Badge bg="success">Success</Badge> <Badge bg="danger">Danger</Badge> <Badge bg="warning" text="dark"> Warning </Badge> <Badge bg="info">Info</Badge> <Badge bg="light" text="dark"> Light </Badge> <Badge bg="dark">Dark</Badge> </Stack> ); } export default VariationsExample;

import Badge from 'react-bootstrap/Badge';
import Stack from 'react-bootstrap/Stack';

function VariationsExample() {
  return (
    <Stack direction="horizontal" gap={2}>
      <Badge bg="primary">Primary</Badge>
      <Badge bg="secondary">Secondary</Badge>
      <Badge bg="success">Success</Badge>
      <Badge bg="danger">Danger</Badge>
      <Badge bg="warning" text="dark">
        Warning
      </Badge>
      <Badge bg="info">Info</Badge>
      <Badge bg="light" text="dark">
        Light
      </Badge>
      <Badge bg="dark">Dark</Badge>
    </Stack>
  );
}

export default VariationsExample;

ピルバッジ

pill 修飾子クラスを使用して、バッジをより丸くします (より大きな border-radius)。v3 のバッジが懐かしい場合は便利です。

結果

読み込み中...

ライブエディター

import Badge from 'react-bootstrap/Badge'; import Stack from 'react-bootstrap/Stack'; function PillExample() { return ( <Stack direction="horizontal" gap={2}> <Badge pill bg="primary"> Primary </Badge> <Badge pill bg="secondary"> Secondary </Badge> <Badge pill bg="success"> Success </Badge> <Badge pill bg="danger"> Danger </Badge> <Badge pill bg="warning" text="dark"> Warning </Badge> <Badge pill bg="info"> Info </Badge> <Badge pill bg="light" text="dark"> Light </Badge> <Badge pill bg="dark"> Dark </Badge> </Stack> ); } export default PillExample;

import Badge from 'react-bootstrap/Badge';
import Stack from 'react-bootstrap/Stack';

function PillExample() {
  return (
    <Stack direction="horizontal" gap={2}>
      <Badge pill bg="primary">
        Primary
      </Badge>
      <Badge pill bg="secondary">
        Secondary
      </Badge>
      <Badge pill bg="success">
        Success
      </Badge>
      <Badge pill bg="danger">
        Danger
      </Badge>
      <Badge pill bg="warning" text="dark">
        Warning
      </Badge>
      <Badge pill bg="info">
        Info
      </Badge>
      <Badge pill bg="light" text="dark">
        Light
      </Badge>
      <Badge pill bg="dark">
        Dark
      </Badge>
    </Stack>
  );
}

export default PillExample;

API

バッジ