Badge
A small label, generally appearing inside or in proximity to another larger interface component, representing a status, property, or some other metadata.
The text attribute sets the badge's text.
Set the appearance attribute to change the badge's appearance.
The connotation attribute controls the purpose of the badge, expressed in its colors.
Use the shape attribute to change the badge's edges.
The size attribute controls the size of the badge.
The icon attribute displays an icon from the icon library](/icons/icons-gallery/), which can be displayed on the leading (default) or trailing side (icon-trailing) of the badge.
The preferred way to add icons is to use the icon slot.
This should only be used for decorative icons (as there is no way to provide an accessible label to describe the icon). For informative icons, use the icon slot and provide an accessible label using the label attribute on the Icon component.
The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
If the label is omitted, the badge will be displayed as an icon-only badge.
When an element has no visible text, provide an accessible name using the label