Tag

Uso

Tag es una etiqueta no interactiva. value muestra texto o un número, incluidos 0 y una cadena vacía intencional. Solo null o undefined activa el contenido proyectado. tone y variant son independientes. El Input icon resuelve un icono registrado por la aplicación; neuTagIcon aporta tu propio template y tiene prioridad cuando existe value. Si no hay value, proyecta conjuntamente el icono y la etiqueta.

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-tag
  value="Borrador"
  tone="neutral"
  variant="soft"
  [rounded]="false"
/>

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

Conserva una etiqueta visible y no comuniques la categoría o el estado solo por color. Marca los SVG decorativos con aria-hidden. Tag no añade semántica de botón, eliminación ni foco con teclado; compón un botón accesible independiente si la interfaz necesita una acció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.

import { NeuTagIconDirective } from '@neural-ui/core/tag';

// Declaración pública (solo referencia)
export declare class NeuTagIconDirective {
}

import { NeuTagIconDirective } from '@neural-ui/core/tag';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<void>;

Public Types

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

import type { NeuTagTone } from '@neural-ui/core/tag';

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

import type { NeuTagVariant } from '@neural-ui/core/tag';

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

Estilos y tokens

Utiliza tone para la intención semántica, variant para el tratamiento de la superficie y rounded para las esquinas redondeadas. Los tokens semánticos de texto y superficie de Core definen la paleta. El template de icono personalizado hereda currentColor; la aplicación proporciona sus dimensiones.

Componentes relacionados

Consulta los componentes relacionados para componer la interfaz del entorno.

• Badge
• Card