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 20 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.
`tooltip`	`string`	`''`	Texto explícito del tooltip. Si se omite, el badge muestra su propio contenido como tooltip solo cuando está truncado.
`interactive`	`boolean`	`false`	Convierte el badge en un interruptor interactivo: expone role="button", una parada de tabulación de teclado y emite el output selected al activarse.
`active`	`boolean`	`false`	Refleja el estado pulsado/seleccionado de un badge interactivo, alternando .hub-badge--active y el atributo aria-pressed.
`dotOverlay`	`boolean`	`false`	Renderiza el punto de estado como una superposición de esquina anclada al contenedor del badge en lugar del punto inicial en línea.
`dotPlacement`	`HubBadgeOverlayPlacement`	`'top-end'`	Esquina a la que se ancla el punto superpuesto cuando dotOverlay está habilitado (p. ej. top-end, top-start, bottom-end, bottom-start).
`hub-chip · selected`	`model<boolean>`	`false`	hub-chip: estado selected (pulsado) del chip con enlace bidireccional.
`hub-chip · value`	`unknown`	`undefined`	hub-chip: valor opaco que identifica el chip dentro de su hub-chip-set contenedor.
`hub-chip · color`	`HubBadgeColor`	`'primary'`	hub-chip: acento semántico que rige los colores del chip, compartido con hub-badge.
`hub-chip · disabled`	`boolean`	`false`	hub-chip: deshabilita el chip — sin conmutación, sin eliminación, retirado del orden de tabulación.
`hub-chip · removable`	`boolean`	`false`	hub-chip: habilita la posibilidad de descarte, replicando el patrón de descarte del badge.
`hub-chip · removeLabel`	`string`	`'Remove chip'`	hub-chip: etiqueta accesible del botón de descarte.
`hub-chip-set · selectionMode`	`'single' \| 'multiple'`	`'single'`	hub-chip-set: si puede seleccionarse uno (single) o varios (multiple) chips a la vez.
`hub-chip-set · value`	`model<unknown>`	`undefined`	hub-chip-set: valor de selección con enlace bidireccional — el value del chip seleccionado en modo single, o el array de valores seleccionados en modo multiple.

Outputs

Reacciona a lo que hace badges: 6 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.
`selected`	`EventEmitter<void>`	Emitido cuando un badge interactivo se activa mediante clic, Enter o Space.
`hub-chip · selectedChange`	`EventEmitter<boolean>`	hub-chip: emitido cada vez que cambia el estado selected bidireccional.
`hub-chip · removed`	`EventEmitter<void>`	hub-chip: emitido cuando se activa el botón de descarte.
`hub-chip · chipClick`	`EventEmitter<void>`	hub-chip: emitido en cada activación (clic / Enter / Space), antes de aplicar la conmutación.
`hub-chip-set · valueChange`	`EventEmitter<unknown>`	hub-chip-set: emitido cada vez que cambia el valor de selección bidireccional.

Templates

Hazlo tuyo — 1 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`[hubChipLeading]`	Proyecta un icono o avatar inicial en el chip, renderizado antes del contenido del chip.	`<hub-chip [value]="'open'" color="success"> <i hubChipLeading class="fa-solid fa-circle" aria-hidden="true"></i> Open </hub-chip>`