API リファレンス

badges の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

7 個のインプットで badges を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`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.

テンプレートはまだドキュメント化されていません。

14 個の CSS 変数であらゆるピクセルをテーマ設定。:root で上書きするか、ラッパーにスコープを限定できます。

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`

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`

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`

スタイリングのサンプルはまだドキュメント化されていません。このセクションには、カスタマイズのレシピやテーマ設定のサンプルが含まれる予定です。