Basic
Standalone
Overflow Count
Red badge
Dynamic
Clickable
Offset
Size
Status
Colorful Badge
Ribbon
API

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

⁵⁰

Basic

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

import { Badge, Avatar } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';

ReactDOM.render(
  <>
    <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>
  </>,
  mountNode,
);

⁹⁹⁹⁹⁺¹⁰⁺⁹⁹⁹⁺

Overflow Count

${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.

import { Badge, Avatar } from 'antd';

ReactDOM.render(
  <>
    <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>
  </>,
  mountNode,
);

⁵

Dynamic

The count will be animated as it changes.

import { Badge, Button, Switch, Divider, Avatar } 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 (
      <>
        <Badge count={this.state.count}>
          <Avatar shape="square" size="large" />
        </Badge>
        <ButtonGroup>
          <Button onClick={this.decline}>
            <MinusOutlined />
          </Button>
          <Button onClick={this.increase}>
            <PlusOutlined />
          </Button>
          <Button onClick={this.random}>
            <QuestionOutlined />
          </Button>
        </ButtonGroup>
        <Divider />
        <Badge dot={this.state.show}>
          <Avatar shape="square" size="large" />
        </Badge>
        <Switch onChange={this.onChange} checked={this.state.show} />
      </>
    );
  }
}

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

⁵

Offset

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.

import { Badge, Avatar } from 'antd';

ReactDOM.render(
  <Badge count={5} offset={[10, 10]}>
    <Avatar shape="square" size="large" />
  </Badge>,
  mountNode,
);

Success
Error
Default
Processing
Warning

Status

Standalone badge with status.

import { Badge } from 'antd';

ReactDOM.render(
  <>
    <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" />
  </>,
  mountNode,
);

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

Ribbon

Use ribbon badge.

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

²⁵

⁹⁹⁺

Standalone

Used in standalone when children is empty.

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
        className="site-badge-count-109"
        count={show ? 109 : 0}
        style={{ backgroundColor: '#52c41a' }}
      />
    </Space>
  );
};

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

Link something

Red badge

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

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

ReactDOM.render(
  <>
    <Badge dot>
      <NotificationOutlined style={{ fontSize: 16 }} />
    </Badge>
    <Badge dot>
      <a href="#">Link something</a>
    </Badge>
  </>,
  mountNode,
);

⁵

Clickable

The badge can be wrapped with a tag to make it linkable.

import { Badge, Avatar } from 'antd';

ReactDOM.render(
  <a href="#">
    <Badge count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
  </a>,
  mountNode,
);

⁵⁵

Size

Set size of numeral Badge.

import { Badge, Avatar } from 'antd';

ReactDOM.render(
  <>
    <Badge size="default" count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge size="small" count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
  </>,
  mountNode,
);

Presets

pink

red

yellow

orange

cyan

green

blue

purple

geekblue

magenta

volcano

gold

lime

Custom

#f50
#2db7f5
#87d068
#108ee9

Colorful Badge

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.

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>
    <>
      <Badge color="#f50" text="#f50" />
      <br />
      <Badge color="#2db7f5" text="#2db7f5" />
      <br />
      <Badge color="#87d068" text="#87d068" />
      <br />
      <Badge color="#108ee9" text="#108ee9" />
    </>
  </>,
  mountNode,
);
.ant-tag {
  margin-bottom: 8px;
}

API#

Badge#

Property	Description	Type	Default	Version
color	Customize Badge dot color	string	-
count	Number to show in badge	ReactNode	-
dot	Whether to display a red dot instead of `count`	boolean	false
offset	Set offset of the badge dot	[number, number]	-
overflowCount	Max count to show	number	99
showZero	Whether to show badge when `count` is zero	boolean	false
size	If `count` is set, `size` sets the size of badge	`default` \| `small`	-	4.6.0
status	Set Badge as a status dot	`success` \| `processing` \| `default` \| `error` \| `warning`	-
text	If `status` is set, `text` sets the display text of the status `dot`	ReactNode	-
title	Text to show when hovering over the badge	string	-

Badge.Ribbon (4.5.0+)#

Property	Description	Type	Default
color	Customize Ribbon color	string	-
placement	The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR)	`start` \| `end`	`end`
text	Content inside the Ribbon	ReactNode	-