Badge
Badge displays a dynamic notification that can be placed within clickable elements such as a button a link, profiles, or avatars. It enhances the component to which it is attached with additional information like counting hidden selections and communicating success, warnings or errors.
Badges are typically positioned as overlays to other components, such as buttons, links or avatars. Don't place badge as a standalone component; always wrapping another element.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
The background, foreground & border color can be customized using the --z-badge--bg, --z-badge--color and --z-badge--border CSS variables or the custom attribute.