Skip to content 
Filter Chat
Badge content
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.
| CSS Variable | Type | Description |
|---|---|---|
--z-badge--bg | color | Background color |
--z-badge--color | color | Foreground color |
--z-badge--border-color | color | Border color |
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.
Badged content