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.

TypeScript
JavaScript
import { ClockCircleOutlined } from 'infra-design-icons';
import { Avatar, Badge } from 'infrad';
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;

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

Overflow Count

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

TypeScript
JavaScript
import { Avatar, Badge } from 'infrad';
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;

⁵

Dynamic

The count will be animated as it changes.

TypeScript
JavaScript
import { MinusOutlined, PlusOutlined, QuestionOutlined } from 'infra-design-icons';
import { Avatar, Badge, Button, Divider, Switch } from 'infrad';
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;

⁵

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.

TypeScript
JavaScript
import { Avatar, Badge } from 'infrad';
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

Status

Standalone badge with status.

TypeScript
JavaScript
import { Badge } from 'infrad';
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

Ribbon

Use ribbon badge.

TypeScript
JavaScript
import { Badge, Card } from 'infrad';
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;
}

²⁵

⁹⁹⁺

Standalone

Used in standalone when children is empty.

TypeScript
JavaScript
import { ClockCircleOutlined } from 'infra-design-icons';
import { Badge, Space, Switch } from 'infrad';
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

Red badge

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

TypeScript
JavaScript
import { NotificationOutlined } from 'infra-design-icons';
import { Badge } from 'infrad';
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;

⁵

Clickable

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

TypeScript
JavaScript
import { Avatar, Badge } from 'infrad';
import React from 'react';

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

export default App;

⁵⁵

Size

Set size of numeral Badge.

TypeScript
JavaScript
import { Avatar, Badge } from 'infrad';
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;

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.

TypeScript
JavaScript
import { Badge, Divider } from 'infrad';
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#

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	-