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.
Référence API
Voici le contrat complet de badges : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Réglez badges à votre goût avec 7 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | 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
Réagissez à ce que fait badges — 1 événements sur lesquels accrocher votre logique.
| Nom | Type | Description |
|---|---|---|
removed | EventEmitter<void> | Emitted when the dismiss action of a removable badge is activated. |
Templates
Aucun template documenté pour le moment.
Variables CSS
Personnalisez chaque pixel avec 14 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Layout & Spacing
Typography, padding, radius and internal gap tokens for the badge shell.
| Variable | Par défaut | 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 | Par défaut | 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 | Par défaut | 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 |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.