logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Badge

Small numerical value or status descriptor for UI elements.
Importimport { Badge } from "antd";
Sourcecomponents/badge
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

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

Examples

API

Common props ref:Common props

Badge

PropertyDescriptionTypeDefaultVersion
colorCustomize Badge dot colorstring-
countNumber to show in badgeReactNode-
classNamesSemantic DOM classRecord<SemanticDOM, string>-5.7.0
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--
statusSet Badge as a status dotsuccess | processing | default | error | warning-
stylesSemantic DOM styleRecord<SemanticDOM, CSSProperties>-5.7.0
textIf status is set, text sets the display text of the status dotReactNode-
titleText to show when hovering over the badgestring-

Badge.Ribbon

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

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
dotSizeSize of dot badgenumber6
indicatorHeightHeight of badgestring | number20
indicatorHeightSMHeight of small badgestring | number14
indicatorZIndexz-index of badgestring | numberauto
statusSizeSize of status badgenumber6
textFontSizeFont size of badge textnumber12
textFontSizeSMFont size of small badge textnumber12
textFontWeightFont weight of badge textstring | numbernormal
Global TokenHow to use?
Basic

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Overflow Count

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Dynamic

The count will be animated as it changes.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Status

Standalone badge with status.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Ribbon

Use ribbon badge.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Standalone

Used in standalone when children is empty.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Red badge

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Clickable

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Size

Set size of numeral Badge.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5
0
99
99+
10+
999+
5
5

Success
Error
Default
Processing
Warning
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
11
25
99+
Link something
5
5
5
Presets
pink
red
yellow
orange
cyan
green
blue
purple
geekblue
magenta
volcano
gold
lime
Custom
#f50
rgb(45, 183, 245)
hsl(102, 53%, 61%)
hwb(205 6% 9%)
5
  • root
    5.7.0
    Root element
  • indicator
    5.7.0
    Indicator element