Badge徽标数

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

基本

简单的徽章展示，当 为 0 时，默认不显示，但是可以使用 showZero 修改为显示。

超过 overflowCount 的会显示为 ${overflowCount}+，默认的 overflowCount 为 99。

import { Badge } from 'antd';
ReactDOM.render(
  <div>
    <Badge count={99}>
      <a href="#" className="head-example" />
    </Badge>
    <Badge count={100}>
      <a href="#" className="head-example" />
    </Badge>
    <Badge count={99} overflowCount={10}>
      <a href="#" className="head-example" />
    </Badge>
    <Badge count={1000} overflowCount={999}>
      <a href="#" className="head-example" />
    </Badge>
  </div>,
  mountNode,
);

用 a 标签进行包裹即可。

import { Badge } from 'antd';
ReactDOM.render(
  <a href="#">
    <Badge count={5}>
      <span className="head-example" />
    </Badge>
  </a>,
  mountNode,
);

状态点

用于表示状态的小圆点。

不包裹任何元素即是独立使用，可自定样式展现。

import { Badge } from 'antd';
  <div>
    <Badge count={25} />
    <Badge
      count={4}
      style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
    />
    <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
  </div>,
  mountNode,
);

讨嫌的小红点

没有具体的数字。

import { Badge, Icon } from 'antd';
ReactDOM.render(
  <div>
    <Badge dot>
      <Icon type="notification" />
    </Badge>
    <Badge count={0} dot>
      <Icon type="notification" />
    </Badge>
    <Badge dot>
      <a href="#">Link something</a>
    </Badge>
  </div>,
  mountNode,
);

展示动态变化的效果。

多彩徽标

3.16.0 后新增。我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。

import { Badge } from 'antd';
const colors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'blue',
  'purple',
  'magenta',
  'volcano',
  'gold',
  'lime',
];
ReactDOM.render(
  <div>
    <h4 style={{ marginBottom: 16 }}>Presets:</h4>
    <div>
      {colors.map(color => (
        <div key={color}>
          <Badge color={color} text={color} />
        </div>
      ))}
    </div>
    <h4 style={{ margin: '16px 0' }}>Custom:</h4>
    <div>
      <Badge color="#f50" text="#f50" />
      <br />
      <Badge color="#2db7f5" text="#2db7f5" />
      <br />
      <Badge color="#87d068" text="#87d068" />
      <br />
      <Badge color="#108ee9" text="#108ee9" />
    </div>
  </div>,
  mountNode,
);

.ant-tag {
  margin-bottom: 8px;

<Badge count={5} />