Badge

The RhBadge is commonly used in user interfaces and provides a simple yet effective way to draw attention to relevant details.

Usage

Once installed, you can import the RhBadge component into your React application:

copy

import {RhBadge} from "@rhythm-ui/react"

Then, you can use the RhBadge component in your JSX code:

copy

<RhBadge count="5" ring>
  <RhButton>Notification</RhButton>
</RhBadge>

Badge Props

Name	Type	Default	Description
count	any		Count prop takes value as number, string, JSXElement
maxCount	number	99	MaxCount takes a value as a number. Once the value of a count exceeds the value of a maxCount, the count value becomes a maxCount Default value is 99.
size	"sm" \| "lg" \| "md"	md	Size values can be either a sm, md or lg Default value is md
position	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"	top-right	Position prop is set to value (top-left, top-right, bottom-left, bottom-left) Default value is top-right
ring	boolean	false	A Ring prop takes a value as a boolean. If true, a white outer border can be seen on the badge
offset	number	0	An Offset prop takes a value as a number. It can be a negative or a position number. - negative number pushes badge outside. - positive number pushes badge inside.

Large Count Size

The count prop allows the developer to easily update the number displayed within the badge as needed.

copy

<RhBadge count="89" ring>
  <RhButton>Notification</RhButton>
</RhBadge>

Max Count

The maxCount prop represents the max count value. If the count value exceeds the maxCount value, the badge displays a different visual representation, such as "999+".

copy

<RhBadge maxCount={999} count={1000} ring offset={-4}>
  <RhButton>Notification</RhButton>
</RhBadge>

Dot Notification

The ring props is a visual indicator, represented by a colored dot, used to alert users of new or unread information without interrupting their workflow in a user interface.

copy

<RhBadge ring size="sm" offset={5}>
  <RhButton>Notification</RhButton>
</RhBadge>

Dot Sizes

The size prop changes the size of the badge component. This can be used to display badges in different sizes, such as small, medium, or large.

copy

<div className="flex gap-3">
  <RhBadge ring size="sm" offset={6}>
    <RhIcon icon="heroicons:device-tablet" className="text-gray-400 text-4xl" />
  </RhBadge>
  <RhBadge ring size="md" offset={4}>
    <RhIcon icon="heroicons:device-tablet" className="text-gray-400 text-4xl" />
  </RhBadge>
  <RhBadge ring size="lg" offset={2}>
    <RhIcon icon="heroicons:device-tablet" className="text-gray-400 text-4xl" />
  </RhBadge>
</div>

Position

The position prop represents the position of the badge relative to its parent component.

copy

<div className="flex gap-3">
  <RhBadge ring size="md" offset={3} position="top-left">
    <RhAvatar type="text" name="Ram Shankar Kumar" />
  </RhBadge>
  <RhBadge ring size="md" offset={3} position="top-right">
    <RhAvatar type="text" name="Kavish Jadon" />
  </RhBadge>
  <RhBadge ring size="md" offset={3} position="bottom-left">
    <RhAvatar type="text" name="Ajayghosh M" />
  </RhBadge>
  <RhBadge ring size="md" offset={3} position="bottom-right">
    <RhAvatar type="text" name="Chandrika Chhena" />
  </RhBadge>
</div>