Angular Badges Library | ng-hub-ui-badges

Semantic Angular badges for statuses, counters and removable filter tags, with CSS variables and public SCSS mixins for custom colour families.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Semantic Matrix

Semantic colours
PrimarySecondarySuccessDangerWarningInfo
Visual variants
SolidSoftOutlineGhostSubtleSurface

Scale & Shape

Sizes
XSSMMDLG
Shapes
PillRoundedSquare

Status & Counters

Status dots
API gatewayOnline
Review queuePending review
Billing exportsBlocked
Counters
12 5 alerts 42 deployments

Removable Filters

3 active filters
Priority: High Assigned: Me Status: Open

Open Semantic Theming

Brand solidBrand softBrand outlineBrand ghostBrand surface

Truncation & Tooltip

Narrow column — long labels truncate; hover a badge for the full text.
Processing invoice exportCompleted with warningsCompletedWaiting for manual approval
Explicit tooltip overrides the label, even when it fits:SyncedCap the width per badge with --hub-badge-max-width:A very long capped label

Interactive filter chips

Status (single select) Open Pending Closed Selected: open
Labels (multiple select) bug feature docs urgent Selected: feature

Chip Colours

Semantic colours
primarysecondarysuccessdangerwarninginfoneutrallightdark
Standalone toggle (two-way selected)
NotificationsRemovableDisabled
notifications: true