Badge - Keep React

The Badge component in the Keep React allows you to add visual indicators or labels to highlight specific information or provide additional context. With customizable options for style, size, type, icon, and state, you can create versatile badges that fit your design needs.

Table of Contents#

Default Badge
Sizes of Badge
Variant of Badge
Icon With Badge
Badge With Dot
Only Icon With Badge
API Reference

Default Badge#

The default badge offers a simple yet effective way to highlight information. It's a versatile component that can be customized to suit various design requirements.

DefaultGray BadgeError BadgesSuccess BadgesWarning Badges

Sizes of Badge#

The Badge component provides two available sizes: xs (extra small) and sm (small), allowing you to choose the appropriate size for your specific design needs.

Extra SmallSmall Badge

Variant of Badge#

The Badge component offers three variants: colorType="light",colorType="strong" and badgeType="text". These variants provide options for different visual styles, allowing you to choose the one that best suits your design and helps highlight the badge content effectively.

BadgeBadgeBadge

Icon With Badge#

The Badge component can be combined with an icon to create an enhanced visual element that conveys additional information or status. You can position the icon on either the iconPosition="left" or iconPosition="right" side of the badge, allowing you to customize the badge's appearance and ensure its compatibility with your design.

BadgesBadges

Badge With Dot#

You can display a badge with a dot by setting the dot prop to true. Additionally, you can customize the position of the dot by using the dotPosition prop, allowing you to choose between left and right.

Left DotRight Dot

Only Icon With Badge#

You can utilize the Badge component to create badges with just icons. This is especially useful when you want to display a compact and visually informative badge alongside an icon.

API Reference#

Explore the available props for the Badge component

Property	Description	Type	Default
color	Available Badge color.	error gray info success warning	gray
colorType	Color type of the badge	light strong	light
badgeType	Type of the badge	default outline text	default
href	URL to navigate when the badge is clicked.	string	None
icon	Icon element to be displayed inside the badge.	ReactNode	<Crown/>
iconPosition	Position of the icon inside the badge.	left right	right
className	Custom CSS class to be added to the badge.	string	None
size	Size variant of the badge.	xs sm	sm
dot	Show a dot on the badge.	boolean	false
dotPosition	Position of the dot inside the badge	left right	right