API-Referenz

Hier ist der vollständige Vertrag für badges: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle badges mit 7 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`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

Reagiere darauf, was badges tut — 1 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`removed`	`EventEmitter<void>`	Emitted when the dismiss action of a removable badge is activated.

Templates

Noch keine Templates dokumentiert.

CSS-Variablen

Gestalte jedes Pixel mit 14 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.

Layout & Spacing

Typography, padding, radius and internal gap tokens for the badge shell.

Variable	Standard	Typ	Beschreibung
`--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	Standard	Typ	Beschreibung
`--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	Standard	Typ	Beschreibung
`--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 und Theming

Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.