UI Library
Badge
Labels, counters, and status markers.
Style
Badges can be flat, tonal, or outlined.
DefaultPrimarySuccessWarningDangerInfo
Color
Tone changes follow the dashboard palette.
PrimarySecondarySuccessWarningDangerInfo
Position
Badges can anchor to the corner of a control.
Inbox8Tasks12Online
Icon
Icon badges are useful for compact status markers.
Inbox Synced Review Failed
Avatar Status
Badges pair with avatars to show presence.
ONBZ
Dynamic notifications
Counters can reflect live application state.
Notifications8
Show on hover
Badges can appear only when the host is hovered.
Tabs
Badges also work in segmented navigation.
Maximum Value
Counts can cap visually while preserving the live value.
99+99+100+100+999+999+
Tonal
Tonal badges are softer and easier to layer.
PrimarySecondarySuccessWarningDangerInfo