Angular Badges-Bibliothek | ng-hub-ui-badges

Semantische Angular-Badges für Status, Zähler und entfernbare Filter-Tags, mit CSS-Variablen und öffentlichen SCSS-Mixins für eigene Farbfamilien.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Semantische Matrix

Semantic colours
PrimarySecondarySuccessDangerWarningInfo
Visual variants
SolidSoftOutlineGhostSubtleSurface

Größe & Form

Sizes
XSSMMDLG
Shapes
PillRoundedSquare

Status & Zähler

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

Entfernbare Filter

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

Offenes semantisches Theming

Brand solidBrand softBrand outlineBrand ghostBrand surface

Kürzung & 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

Interaktive Filter-Chips

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

Chip-Farben

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