Badge - Keep React
Table of Contents#
- Default Badge
- Sizes of Badge
- Variant of Badge
- Icon With Badge
- Badge With Dot
- Only Icon With Badge
- API Reference
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.
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.
Variant of Badge#
The Badge component offers three variants:
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.
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="right" side of the badge, allowing you to customize the badge's appearance and ensure its compatibility with your design.
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
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.
Explore the available props for the Badge component
|color||Available Badge color.|
|colorType||Color type of the badge|
|badgeType||Type of the badge|
|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.|
|className||Custom CSS class to be added to the badge.||string||None|
|dotStyle||Custom style to be added to the badge.||string||None|
|iconStyle||Custom style to be added to the badge icon.||string||None|
|size||Size variant of the badge.|
|dot||Show a dot on the badge.||boolean||false|
|dotPosition||Position of the dot inside the badge|