Badge

Uso

Badge recibe la etiqueta mediante contenido proyectado, no mediante un Input value. tone expresa la intención semántica y variant elige soft u outline. size controla la compacidad, pill las esquinas redondeadas y dot añade un indicador decorativo de estado. No funciona como un contador de notificaciones anclado a otro elemento.

Ejemplos

Prueba el ejemplo y abre Código para ver la implementación completa. Reiniciar restablece el estado inicial del ejemplo.

Prueba y configura

Cambia las opciones y revisa la vista previa. El template generado permanece junto a los controles; Código contiene el ejemplo ejecutable completo.

<neu-badge
  tone="neutral"
  variant="soft"
  size="md"
  [dot]="false"
  [pill]="true"
>
  Borrador
</neu-badge>

Datos y contenido

La aplicación proporciona los Inputs y controla la interacción del entorno. Este componente no tiene modelos ni Outputs. La proyección de contenido y los templates de iconos se documentan por separado cuando existen.

Accesibilidad y teclado

Incluye siempre texto visible significativo. Un punto o un color por sí solos no explican el estado. Badge no es interactivo ni recibe foco con teclado; utiliza un botón si el usuario debe cambiar o filtrar el estado. Añade una región de estado externa solo cuando sea necesario anunciar una actualización.

API

Todos los Inputs públicos se extraen del paquete Core fijado. Los tipos con nombre enlazan con sus definiciones. Solo se enumeran las zonas de proyección y los templates públicos reales.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuBadgeSize } from '@neural-ui/core/badge';

// Declaración pública (solo referencia)
export type NeuBadgeSize = 'sm' | 'md';

import type { NeuBadgeTone } from '@neural-ui/core/badge';

// Declaración pública (solo referencia)
export type NeuBadgeTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger';

import type { NeuBadgeVariant } from '@neural-ui/core/badge';

// Declaración pública (solo referencia)
export type NeuBadgeVariant = 'soft' | 'outline';

Estilos y tokens

El tono utiliza superficies semánticas y texto legible; outline mantiene el fondo transparente. size y pill son los controles públicos de forma. Comprueba todos los tonos en ambos temas y conserva el texto aunque actives dot.

Componentes relacionados

Consulta los componentes relacionados para componer la interfaz del entorno.

• Tag
• Avatar