Referencia API

Aquí tienes el contrato completo de badges: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta badges a tu gusto con 7 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`variant`	`HubBadgeVariant`	`'solid'`	Tratamiento visual de la carcasa del badge.
`color`	`HubBadgeColor`	`'primary'`	Familia de color semántica. Las variantes integradas mapean a las familias de tokens del design system y también se admiten nombres personalizados.
`size`	`HubBadgeSize`	`'md'`	Escala de tamaño del badge.
`shape`	`HubBadgeShape`	`'pill'`	Tratamiento de esquinas de la carcasa del badge.
`dot`	`boolean`	`false`	Renderiza un dot de estado al inicio antes de la etiqueta.
`removable`	`boolean`	`false`	Activa la acción de cierre y convierte el badge en un filtro/tag removible.
`removeLabel`	`string`	`'Remove badge'`	Etiqueta accesible aplicada al botón de cierre.

Outputs

Reacciona a lo que hace badges: 1 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`removed`	`EventEmitter<void>`	Se emite cuando se activa la acción de cierre de un badge removible.

Templates

Todavía no hay templates documentados.

Variables CSS

Personaliza cada detalle con 14 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.

Disposición y espaciado

Tokens de tipografía, padding, radio y separación interna para la carcasa del badge.

Variable	Por defecto	Tipo	Descripción
`--hub-badge-font-size`	`0.875rem`	length	Tamaño de fuente base del badge. `0.75rem1rem`
`--hub-badge-padding-x`	`0.625rem`	length	Relleno horizontal interno del badge. `0.5rem0.875rem`
`--hub-badge-padding-y`	`0.375rem`	length	Relleno vertical interno del badge. `0.25rem0.5rem`
`--hub-badge-border-radius`	`50rem`	length	Radio de las esquinas del badge. `0.25rem9999px`
`--hub-badge-gap`	`0.375rem`	length	Espacio entre el punto, los iconos, la etiqueta y el botón de cierre. `0.25rem0.5rem`
`--hub-badge-direction`	`row`	string	Dirección flex del contenido del badge (icono proyectado, etiqueta y botón de cierre). `rowrow-reverse`
`--hub-badge-align`	`center`	string	Alineación en el eje transversal del contenido del badge. `centerbaseline`

Roles de color semánticos

Roles de accent, subtle, emphasis y border derivados de la familia semántica seleccionada.

Variable	Por defecto	Tipo	Descripción
`--hub-badge-accent`	`var(--hub-sys-color-primary)`	color	Acento semántico raíz del que el badge deriva su aspecto. `var(--hub-sys-color-success)#7c3aed`
`--hub-badge-accent-subtle`	`var(--hub-sys-color-primary-subtle)`	color	Superficie tintada usada por las variantes soft y subtle. `#e7f1ff#ede9fe`
`--hub-badge-accent-emphasis`	`var(--hub-sys-color-primary-emphasis)`	color	Color de énfasis usado por las variantes outline, ghost y soft. `#0a58ca#5b21b6`
`--hub-badge-accent-border`	`var(--hub-sys-color-primary-border-subtle)`	color	Rol de borde usado por las variantes subtle y surface. `#9ec5fe#c4b5fd`

Dot y acción de cierre

Tokens que gobiernan el tamaño del dot de estado y la affordance de cierre.

Variable	Por defecto	Tipo	Descripción
`--hub-badge-dot-size`	`0.5rem`	length	Diámetro del punto de estado opcional. `0.375rem0.625rem`
`--hub-badge-remove-size`	`1rem`	length	Tamaño del área de pulsación del botón de cierre. `0.875rem1.25rem`
`--hub-badge-remove-hover-bg`	`color-mix(in srgb, currentColor 12%, transparent)`	color	Superficie en hover del botón de cierre. `rgba(0,0,0,.08)transparent`

Estilos y theming

Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.