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.
API reference
Here's the full contract for badges: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.
Inputs
Dial badges in with 7 inputs. Bind them like any Angular @Input.
| Name | Type | Default | Description |
|---|---|---|---|
variant | HubBadgeVariant | 'solid' | Visual treatment of the badge shell. |
color | HubBadgeColor | 'primary' | Semantic colour family. Built-ins map to the design-system token families and custom names are supported. |
size | HubBadgeSize | 'md' | Badge size scale. |
shape | HubBadgeShape | 'pill' | Corner treatment of the badge shell. |
dot | boolean | false | Renders a leading status dot before the label. |
removable | boolean | false | Enables the dismiss affordance, turning the badge into a removable filter/tag. |
removeLabel | string | 'Remove badge' | Accessible label applied to the dismiss button. |
Outputs
React to what badges does — 1 events to hook your logic onto.
| Name | Type | Description |
|---|---|---|
removed | EventEmitter<void> | Emitted when the dismiss action of a removable badge is activated. |
Templates
No templates documented yet.
CSS variables
Theme every pixel with 14 CSS variables. Override them at :root or scope them to a wrapper.
Layout & Spacing
Typography, padding, radius and internal gap tokens for the badge shell.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-badge-font-size | 0.875rem | length | Base font size of the badge shell. 0.75rem1rem |
--hub-badge-padding-x | 0.625rem | length | Horizontal padding inside the badge shell. 0.5rem0.875rem |
--hub-badge-padding-y | 0.375rem | length | Vertical padding inside the badge shell. 0.25rem0.5rem |
--hub-badge-border-radius | 50rem | length | Corner radius of the badge shell. 0.25rem9999px |
--hub-badge-gap | 0.375rem | length | Gap between dot, icons, label and remove button. 0.25rem0.5rem |
--hub-badge-direction | row | string | Flex direction of the badge content (projected icon, label and dismiss button). rowrow-reverse |
--hub-badge-align | center | string | Cross-axis alignment of the badge content. centerbaseline |
Semantic Colour Roles
Accent, subtle, emphasis and border roles derived from the selected semantic family.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-badge-accent | var(--hub-sys-color-primary) | color | Root semantic accent from which the badge derives its look. var(--hub-sys-color-success)#7c3aed |
--hub-badge-accent-subtle | var(--hub-sys-color-primary-subtle) | color | Tinted surface used by soft and subtle variants. #e7f1ff#ede9fe |
--hub-badge-accent-emphasis | var(--hub-sys-color-primary-emphasis) | color | Emphasis foreground used by outline, ghost and soft variants. #0a58ca#5b21b6 |
--hub-badge-accent-border | var(--hub-sys-color-primary-border-subtle) | color | Border role used by subtle and surface variants. #9ec5fe#c4b5fd |
Dot & Dismiss Controls
Tokens driving the status-dot size and the removable action affordance.
| Variable | Default | Type | Description |
|---|---|---|---|
--hub-badge-dot-size | 0.5rem | length | Diameter of the optional status dot. 0.375rem0.625rem |
--hub-badge-remove-size | 1rem | length | Size of the dismiss hit area. 0.875rem1.25rem |
--hub-badge-remove-hover-bg | color-mix(in srgb, currentColor 12%, transparent) | color | Hover surface of the dismiss affordance. rgba(0,0,0,.08)transparent |
Styling and theming
No styling examples are documented yet. This section will include customization recipes and theming examples.