Badge徽标数

图标右上角的圆形徽标数字。

何时使用#

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

代码演示

50

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

expand codeexpand code
import { Badge } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';

ReactDOM.render(
  <div>
    <Badge count={5}>
      <a href="#" className="head-example" />
    </Badge>
    <Badge count={0} showZero>
      <a href="#" className="head-example" />
    </Badge>
    <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
      <a href="#" className="head-example" />
    </Badge>
  </div>,
  mountNode,
);
9999+10+999+

超过 overflowCount 的会显示为 ${overflowCount}+,默认的 overflowCount99

expand codeexpand code
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,
);
5

设置状态点的位置偏移,格式为 [left, top],表示状态点距默认位置左侧、上方的偏移量。

expand codeexpand code
import { Badge } from 'antd';

ReactDOM.render(
  <>
    <Badge count={5} offset={[10, 10]}>
      <a href="#" className="head-example" />
    </Badge>
  </>,
  mountNode,
);
pink
red
yellow
orange
cyan
green
blue
purple
geekblue
magenta
volcano
gold
lime
#f50
#2db7f5
#87d068
#108ee9

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

expand codeexpand code
import { Badge, Divider } from 'antd';

const colors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'green',
  'blue',
  'purple',
  'geekblue',
  'magenta',
  'volcano',
  'gold',
  'lime',
];

ReactDOM.render(
  <>
    <Divider orientation="left">Presets</Divider>
    <div>
      {colors.map(color => (
        <div key={color}>
          <Badge color={color} text={color} />
        </div>
      ))}
    </div>
    <Divider orientation="left">Custom</Divider>
    <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>
  </>,
  mountNode,
);
.ant-tag {
  margin-bottom: 8px;
}
Pushes open the window
and raises the spyglass.
Hippies
Pushes open the window
and raises the spyglass.
Hippies
Pushes open the window
and raises the spyglass.
Hippies
Pushes open the window
and raises the spyglass.
Hippies
Pushes open the window
and raises the spyglass.
Hippies
Pushes open the window
and raises the spyglass.
Hippies
Pushes open the window
and raises the spyglass.
Hippies
Pushes open the window
and raises the spyglass.
Hippies

使用缎带型的徽标。

expand codeexpand code
import { Badge, Card } from 'antd';

ReactDOM.render(
  <>
    <Badge.Ribbon text="Hippies">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="pink">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="red">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="cyan">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="green">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="purple">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="volcano">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="magenta">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
  </>,
  mountNode,
);
.ant-card {
  margin-bottom: 16px;
}
25
4
99+

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

在右上角的 badge 则限定为红色。

expand codeexpand code
import { Badge, Space, Switch } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';

const Demo = () => {
  const [show, setShow] = React.useState(true);

  return (
    <Space>
      <Switch
        checked={show}
        onChange={() => {
          setShow(!show);
        }}
      />
      <Badge count={show ? 25 : 0} />
      <Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
      <Badge count={show ? 4 : 0} className="site-badge-count-4" />
      <Badge
        className="site-badge-count-109"
        count={show ? 109 : 0}
        style={{ backgroundColor: '#52c41a' }}
      />
    </Space>
  );
};

ReactDOM.render(<Demo />, mountNode);
.site-badge-count-4 .ant-badge-count {
  color: #999;
  background-color: #fff;
  box-shadow: 0 0 0 1px #d9d9d9 inset;
}

没有具体的数字。

expand codeexpand code
import { Badge } from 'antd';
import { NotificationOutlined } from '@ant-design/icons';

ReactDOM.render(
  <div>
    <Badge dot>
      <NotificationOutlined />
    </Badge>
    <Badge count={0} dot>
      <NotificationOutlined />
    </Badge>
    <Badge dot>
      <a href="#">Link something</a>
    </Badge>
  </div>,
  mountNode,
);
5

展示动态变化的效果。

expand codeexpand code
import { Badge, Button, Switch } from 'antd';
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';

const ButtonGroup = Button.Group;

class Demo extends React.Component {
  state = {
    count: 5,
    show: true,
  };

  increase = () => {
    const count = this.state.count + 1;
    this.setState({ count });
  };

  decline = () => {
    let count = this.state.count - 1;
    if (count < 0) {
      count = 0;
    }
    this.setState({ count });
  };

  random = () => {
    const count = Math.floor(Math.random() * 100);
    this.setState({ count });
  };

  onChange = show => {
    this.setState({ show });
  };

  render() {
    return (
      <div>
        <div>
          <Badge count={this.state.count}>
            <a href="#" className="head-example" />
          </Badge>
          <ButtonGroup>
            <Button onClick={this.decline}>
              <MinusOutlined />
            </Button>
            <Button onClick={this.increase}>
              <PlusOutlined />
            </Button>
            <Button onClick={this.random}>
              <QuestionOutlined />
            </Button>
          </ButtonGroup>
        </div>
        <div style={{ marginTop: 10 }}>
          <Badge dot={this.state.show}>
            <a href="#" className="head-example" />
          </Badge>
          <Switch onChange={this.onChange} checked={this.state.show} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

Success
Error
Default
Processing
Warning

用于表示状态的小圆点。

expand codeexpand code
import { Badge } from 'antd';

ReactDOM.render(
  <div>
    <Badge status="success" />
    <Badge status="error" />
    <Badge status="default" />
    <Badge status="processing" />
    <Badge status="warning" />
    <br />
    <Badge status="success" text="Success" />
    <br />
    <Badge status="error" text="Error" />
    <br />
    <Badge status="default" text="Default" />
    <br />
    <Badge status="processing" text="Processing" />
    <br />
    <Badge status="warning" text="Warning" />
  </div>,
  mountNode,
);
55

可以设置有数字徽标的大小。

expand codeexpand code
import { Badge } from 'antd';

ReactDOM.render(
  <>
    <Badge size="default" count={5}>
      <a href="#" className="head-example" />
    </Badge>
    <Badge size="small" count={5}>
      <a href="#" className="head-example" />
    </Badge>
  </>,
  mountNode,
);

API#

Badge#

参数说明类型默认值版本
color自定义小圆点的颜色string-
count展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为 0 时隐藏ReactNode-
dot不展示数字,只有一个小红点booleanfalse
offset设置状态点的位置偏移[number, number]-
overflowCount展示封顶的数字值number99
showZero当数值为 0 时,是否展示 Badgebooleanfalse
size在设置了 count 的前提下有效,设置小圆点的大小default | small-4.6.0
status设置 Badge 为状态点success | processing | default | error | warning-
text在设置了 status 的前提下有效,设置状态点的文本ReactNode-
title设置鼠标放在状态点上时显示的文字string-

Badge.Ribbon (4.5.0+)#

参数说明类型默认值版本
color自定义缎带的颜色string-
placement缎带的位置,startend 随文字方向(RTL 或 LTR)变动start | endend
text缎带中填入的内容ReactNode-