Badge renders its children as its text content. We recommend not rendering any complex content inside the Badge and only composing it with other components.
Badges can be used to communicate an object's status or attribute, and, therefore, it comes in multiple colors.
Each color can be used with its default appearance or with faded and outline variants.
Badges can display notification bubbles or other numerical values with the rounded property.
Whenever Badge is used with other components, it can leverage a small size to fit into the parent component. For instance, if it's used inside the Tabs button or as a notification bubble.
If you don't have a value to show but instead want to use it as an empty notification badge - you can use it without the children property.
Note: When using an empty badge - you need to provide color property to keep it visible on the screen.
If you want to display a Badge in the corner of another element, you can use Badge.Container compound component. This will help you in situations when you implement notification bubbles, avatar statuses, and other similar cases.
If your wrapped element has a circle shape, Badge won't be covering this element's visible area by default. However, you can achieve different positioning by using an overlap flag.
When using Badge for real-time time data, like displaying unread messages count or displaying a user's status, it might become irrelevant over time. You can control the Badge visibility for such cases with the hidden property.