徽章

徽章的文档和示例，我们的小型计数和标签组件。

示例

徽章通过使用相对字体大小和 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

徽章