Badge

Badges are small status descriptors for UI elements such as avatar-like icons. A badge consists of a small circle, typically containing a number, and appears in proximity to another object. It can be used to add information to any content or highlight the status of an object.

Inspired by Ant Design Badge

When to use it


  • To indicate the status of an object: active, inactive, error, success, in process.
  • To draw attention to unread notifications.

Component anatomy


This is a complex component, which means it consists of more components:

Installation


npm i @synerise/ds-badge
or
yarn add @synerise/ds-badge

Usage


import Badge from '@synerise/ds-badge'
<Badge
count={10}
overflowCount={11}
showZero={false}
/>

Badge Standalone


Badge Dot

Badge Count

Badge Status

API


PropertyDescriptionTypeDefault
backgroundColorCustomize the badge colorgreen / grey / yellow / blue / pink/ mars/ orange/ fern/ cyan/ purple / violet-
backgroundColorHueCustomize brightness of color900 / 800 / 700 / 600 / 500 / 400 / 300 / 200 / 100 / 050-
colorCustomize the badge dot colorstring-
countNumber to show in the badge counterReactNode
dotDisplay a red dot instead of a counterbooleanfalse
flagShow the badge as a flagbooleanfalse
offsetThe offset of the badge dot in [x, y] format[number, number]-
outlinedAdd outline to the badge counterbooleanfalse
overflowCountMaximum number to show in the counternumber99
pulsingEnable pulsing animationbooleanfalse
showZeroShow the badge when the counter is zerobooleanfalse
statusSet badge as a status dotactive / inactive / blocked / processing''
textIf status is set, text sets the display text of the status dotstring''
textColorCustomize text color in badgegreen / grey / yellow / blue / pink/ mars/ orange/ fern/ cyan/ purple / violet-
textColorHueCustomize brightness of color900 / 800 / 700 / 600 / 500 / 400 / 300 / 200 / 100 / 050-
titleText shown when a cursor is hovered over the badgestringcount