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.
Styles
Mixins and styles
Override the key `--hub-badge-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component defaults. Token-based and self-contained.
Theming with hub-badge-theme
| Mixin | Parameters | Description |
|---|---|---|
| Theming | ||
hub-badge-theme() | $accent--hub-badge-accent$bg--hub-badge-bg$color--hub-badge-color$border-color--hub-badge-border-color$border-radius--hub-badge-border-radius$border-width--hub-badge-border-width$padding-x--hub-badge-padding-x$padding-y--hub-badge-padding-y$gap--hub-badge-gap$font-size--hub-badge-font-size$font-weight--hub-badge-font-weight | One-call token theming for `<hub-badge>` (and `<hub-chip>`) |
CSS variables
Theme every pixel with 49 CSS variables. Override them at :root or scope them to a wrapper.
Badge
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-badge-accent | var(--hub-sys-color-primary, #0d6efd) | color | Root semantic accent from which the badge derives its look. |
--hub-badge-accent-border | color-mix(in oklch, var(--hub-badge-accent) 35%, var(--hub-sys-surface-page, #fff)) | color | Border role used by subtle and surface variants. |
--hub-badge-accent-on | oklch(from var(--hub-badge-accent) clamp(0, (0.62 - l) * 1000, 1) 0 h) | color | Badge accent contrast (on-color) |
--hub-badge-accent-emphasis | color-mix(in oklch, var(--hub-badge-accent) 80%, var(--hub-sys-color-ink, #212529)) | color | Emphasis foreground used by outline, ghost and soft variants. |
--hub-badge-accent-subtle | color-mix(in oklch, var(--hub-badge-accent) 12%, var(--hub-sys-surface-page, #fff)) | color | Tinted surface used by soft and subtle variants. |
--hub-badge-align | center | string | Cross-axis alignment of the badge content. |
--hub-badge-bg | var(--hub-badge-accent) | color | Badge bg |
--hub-badge-border-color | var(--hub-badge-accent) | color | Badge border color |
--hub-badge-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Corner radius of the badge shell. |
--hub-badge-border-width | var(--hub-ref-border-width, 1px) | length | Badge border width |
--hub-badge-color | var(--hub-badge-accent-on) | color | Badge color |
--hub-badge-direction | row | string | Flex direction of the badge content (projected icon, label and dismiss button). |
--hub-badge-dot-color | currentColor | color | Badge dot color |
--hub-badge-dot-size | var(--hub-ref-space-2, 0.5rem) | length | Diameter of the optional status dot. |
--hub-badge-focus-ring-color | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Badge focus ring color |
--hub-badge-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Badge focus ring width |
--hub-badge-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Badge font family |
--hub-badge-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Base font size of the badge shell. |
--hub-badge-max-width | 100% | length | Maximum badge width before the label is truncated with an ellipsis. |
--hub-badge-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Badge font weight |
--hub-badge-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between dot, icons, label and remove button. |
--hub-badge-letter-spacing | 0.01em | length | Badge letter spacing |
--hub-badge-line-height | 1 | number | Badge line height |
--hub-badge-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Horizontal padding inside the badge shell. |
--hub-badge-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Vertical padding inside the badge shell. |
--hub-badge-remove-gap | 0.125rem | length | Badge remove gap |
--hub-badge-remove-hover-bg | color-mix(in oklch, currentColor 12%, transparent) | color | Hover surface of the dismiss affordance. |
--hub-badge-remove-size | 1rem | length | Size of the dismiss hit area. |
--hub-badge-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Badge transition |
--hub-badge-active-bg | var(--hub-badge-accent-emphasis) | color | Active (pressed) background of an interactive badge (.hub-badge--active) |
--hub-badge-overlay-offset | -0.25rem | length | Corner inset of the overlay status dot (dotOverlay) |
--hub-chip-set-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between chips inside a hub-chip-set |
--hub-chip-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Chip transition |
--hub-chip-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Chip focus ring width |
--hub-chip-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Chip shell radius |
--hub-chip-border-width | var(--hub-ref-border-width, 1px) | length | Chip border width |
--hub-chip-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Chip vertical padding |
--hub-chip-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Chip horizontal padding |
--hub-chip-font-weight | var(--hub-ref-font-weight-medium, 500) | number | Chip font weight |
--hub-chip-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Chip font size |
--hub-chip-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Chip font family |
--hub-chip-focus-ring | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Chip focus ring colour |
--hub-chip-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between leading slot, label and dismiss button |
--hub-chip-hover-bg | color-mix(in oklch, var(--hub-badge-accent) 20%, var(--hub-sys-surface-page, #fff)) | color | Hover surface for an unselected, enabled chip |
--hub-chip-selected-color | var(--hub-badge-accent-on) | color | Selected chip text colour (on-accent contrast) |
--hub-chip-selected-bg | var(--hub-badge-accent) | color | Selected chip background |
--hub-chip-border-color | var(--hub-badge-accent-border) | color | Resting chip border colour |
--hub-chip-color | var(--hub-badge-accent-emphasis) | color | Resting chip text colour |
--hub-chip-bg | var(--hub-badge-accent-subtle) | color | Resting chip background (shared badge accent family) |