AntD Library
DocsComponentsResources
Sardor Tursunboyev
imgButtonsimgInputsimgDropdownimgCarouselimgBadgeimgTooltipimgProgressimgCheckboximgSwitchimgAlertimgTableimgMenuimgStepsimgCalendarimgMapsimgChartsimgFormsimgDatePickerimgTransferimgUploadimgAvatarimgCardimgCollapseimgImageimgPaginationimgPopoverimgTabsimgDrawerimgModalimgNotificationimgPopConfirmimgResultimgSpinner

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.
0
9
99+
Basic badgeSimplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.
tg imgtg imgtg imgtg img
img
img
img
img
Basic badgeSimplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.
tg imgtg imgtg imgtg img
0
88
99+
Stand AloneSimplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.
tg imgtg imgtg imgtg img
5
98
Stand AloneSimplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.
tg imgtg imgtg imgtg img
bgColor Propsstandalone prop is when you want to render only the badge without any other element.
tg imgtg imgtg imgtg img
StandAlone Dot Sizesstandalone prop is when you want to render only the badge without any other element.
tg imgtg imgtg imgtg img
processing
success
warning
default
error
typesuccess, warning, processing, error, default types
tg imgtg imgtg imgtg img