Badge
Badges act as compact indicators, filledlighting information or status within digital platforms. They are multifunctional, serving to denote unread messages, signify achievements, or categorize content effectively.
Examples
Default
Default Badge.
Number Badge
Use a number by passing the type prop to the component.
Icon Badge
Add icons on the left and right of the text by passing the iconLeading and iconTrailing prop to the component, respectively.
Size
Change the size by passing the size prop
Variant
Change the variant by passing the emphasis prop
Color
Change the color by passing the color prop to the component.
Installation
Size of the Badge
Variant of the Badge.
Color of the Badge.
Type of the Badge. Setting type to number makes the Badge fit the size of the number.
Icon shown on the left of the text in the Badge.
Icon shown on the right of the text in the Badge.
Classname to style the Badge.