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 20 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.
`tooltip`	`string`	`''`	Explicit tooltip text. When omitted, the badge shows its own content as a tooltip only while it is truncated.
`interactive`	`boolean`	`false`	Turns the badge into an interactive toggle: exposes role="button", a keyboard tab stop, and emits the selected output on activation.
`active`	`boolean`	`false`	Reflects the pressed/selected state of an interactive badge, toggling .hub-badge--active and the aria-pressed attribute.
`dotOverlay`	`boolean`	`false`	Renders the status dot as a corner overlay pinned to the badge shell instead of the inline leading dot.
`dotPlacement`	`HubBadgeOverlayPlacement`	`'top-end'`	Corner the overlay dot is pinned to when dotOverlay is enabled (e.g. top-end, top-start, bottom-end, bottom-start).
`hub-chip · selected`	`model<boolean>`	`false`	hub-chip: two-way selected (pressed) state of the chip.
`hub-chip · value`	`unknown`	`undefined`	hub-chip: opaque value identifying the chip inside its enclosing hub-chip-set.
`hub-chip · color`	`HubBadgeColor`	`'primary'`	hub-chip: semantic accent driving the chip colours, shared with hub-badge.
`hub-chip · disabled`	`boolean`	`false`	hub-chip: disables the chip — no toggling, no removal, removed from the tab order.
`hub-chip · removable`	`boolean`	`false`	hub-chip: enables the dismiss affordance, mirroring the badge dismiss pattern.
`hub-chip · removeLabel`	`string`	`'Remove chip'`	hub-chip: accessible label of the dismiss button.
`hub-chip-set · selectionMode`	`'single' \| 'multiple'`	`'single'`	hub-chip-set: whether one (single) or many (multiple) chips can be selected at once.
`hub-chip-set · value`	`model<unknown>`	`undefined`	hub-chip-set: two-way selection value — the selected chip value in single mode, or the array of selected values in multiple mode.

Outputs

React to what badges does — 6 events to hook your logic onto.

Name	Type	Description
`removed`	`EventEmitter<void>`	Emitted when the dismiss action of a removable badge is activated.
`selected`	`EventEmitter<void>`	Emitted when an interactive badge is activated by click, Enter or Space.
`hub-chip · selectedChange`	`EventEmitter<boolean>`	hub-chip: emitted whenever the two-way selected state changes.
`hub-chip · removed`	`EventEmitter<void>`	hub-chip: emitted when the dismiss button is activated.
`hub-chip · chipClick`	`EventEmitter<void>`	hub-chip: emitted on every activation (click / Enter / Space), before the toggle is applied.
`hub-chip-set · valueChange`	`EventEmitter<unknown>`	hub-chip-set: emitted whenever the two-way selection value changes.

Templates

Make it yours — 1 template slots let you project custom markup.

Name	Description	Example
`[hubChipLeading]`	Projects a leading icon or avatar into the chip, rendered before the chip content.	`<hub-chip [value]="'open'" color="success"> <i hubChipLeading class="fa-solid fa-circle" aria-hidden="true"></i> Open </hub-chip>`