Справочник API

Вот полный контракт badges: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте badges с помощью 7 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`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.

События

Реагируйте на то, что делает badges, — 1 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`removed`	`EventEmitter<void>`	Emitted when the dismiss action of a removable badge is activated.

Шаблоны

Шаблоны пока не задокументированы.

CSS-переменные

Тематизируйте каждый пиксель с помощью 14 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.

Layout & Spacing

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

Переменная	По умолчанию	Тип	Описание
`--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.

Переменная	По умолчанию	Тип	Описание
`--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.

Переменная	По умолчанию	Тип	Описание
`--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`

Стилизация и тематизация

Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.