Badge徽标数

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

何时使用#

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

代码演示

50

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

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

const App: React.FC = () => (
  <>
    <Badge count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={0} showZero>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
      <Avatar shape="square" size="large" />
    </Badge>
  </>
);

export default App;
9999+10+999+

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

expand codeexpand code
import { Avatar, Badge } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <Badge count={99}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={100}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={99} overflowCount={10}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={1000} overflowCount={999}>
      <Avatar shape="square" size="large" />
    </Badge>
  </>
);

export default App;
5

展示动态变化的效果。

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

const ButtonGroup = Button.Group;

const App: React.FC = () => {
  const [count, setCount] = useState(5);
  const [show, setShow] = useState(true);

  const increase = () => {
    setCount(count + 1);
  };

  const decline = () => {
    let newCount = count - 1;
    if (newCount < 0) {
      newCount = 0;
    }
    setCount(newCount);
  };

  const random = () => {
    const newCount = Math.floor(Math.random() * 100);
    setCount(newCount);
  };

  const onChange = (checked: boolean) => {
    setShow(checked);
  };

  return (
    <>
      <Badge count={count}>
        <Avatar shape="square" size="large" />
      </Badge>
      <ButtonGroup>
        <Button onClick={decline}>
          <MinusOutlined />
        </Button>
        <Button onClick={increase}>
          <PlusOutlined />
        </Button>
        <Button onClick={random}>
          <QuestionOutlined />
        </Button>
      </ButtonGroup>
      <Divider />
      <Badge dot={show}>
        <Avatar shape="square" size="large" />
      </Badge>
      <Switch onChange={onChange} checked={show} />
    </>
  );
};

export default App;
5

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

expand codeexpand code
import { Avatar, Badge } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Badge count={5} offset={[10, 10]}>
    <Avatar shape="square" size="large" />
  </Badge>
);

export default App;

Success
Error
Default
Processing
Warning

用于表示状态的小圆点。

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

const App: React.FC = () => (
  <>
    <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" />
  </>
);

export default App;
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';
import React from 'react';

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;
.ant-card {
  margin-bottom: 16px;
}
25
99+

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

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

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

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

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

export default App;
Link something

没有具体的数字。

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

const App: React.FC = () => (
  <>
    <Badge dot>
      <NotificationOutlined style={{ fontSize: 16 }} />
    </Badge>
    <Badge dot>
      <a href="#">Link something</a>
    </Badge>
  </>
);

export default App;
55

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

expand codeexpand code
import { Avatar, Badge } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <Badge size="default" count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge size="small" count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
  </>
);

export default App;
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';
import React from 'react';

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

const App: React.FC = () => (
  <>
    <Divider orientation="left">Presets</Divider>
    <div>
      {colors.map(color => (
        <div key={color}>
          <Badge color={color} text={color} />
        </div>
      ))}
    </div>
    <Divider orientation="left">Custom</Divider>
    <>
      <Badge color="#f50" text="#f50" />
      <br />
      <Badge color="#2db7f5" text="#2db7f5" />
      <br />
      <Badge color="#87d068" text="#87d068" />
      <br />
      <Badge color="#108ee9" text="#108ee9" />
    </>
  </>
);

export default App;
.ant-tag {
  margin-bottom: 8px;
}

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-