Badge

Small numerical value or status descriptor for UI elements.

When To Use#

Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.

Examples

50

Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.

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}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.

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

Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.

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

We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.

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

Use ribbon badge.

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+

Used in standalone when children is empty.

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;
}

This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.

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

The count will be animated as it changes.

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

Standalone badge with status.

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

Set size of numeral Badge.

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#

PropertyDescriptionTypeDefaultVersion
colorCustomize Badge dot colorstring-
countNumber to show in badgeReactNode-
dotWhether to display a red dot instead of countbooleanfalse
offsetSet offset of the badge dot[number, number]-
overflowCountMax count to shownumber99
showZeroWhether to show badge when count is zerobooleanfalse
sizeIf count is set, size sets the size of badgedefault | small-4.6.0
statusSet Badge as a status dotsuccess | processing | default | error | warning-
textIf status is set, text sets the display text of the status dotReactNode-
titleText to show when hovering over the badgestring-

Badge.Ribbon (4.5.0+)#

PropertyDescriptionTypeDefaultVersion
colorCustomize Ribbon colorstring-
placementThe placement of the Ribbon, start and end follow text direction (RTL or LTR)start | endend
textContent inside the RibbonReactNode-