Skip to main content
Neural UIv2.0.0Documentation
View v1 GitHub

Tag

Categorize content with semantic labels and optional custom icons.

Category
Feedback and status
Import
@neural-ui/core/tag
Selector
neu-tag
import { NeuTagComponent } from '@neural-ui/core/tag';

Usage

Tag is a non-interactive label. value renders text or a number, including 0 and an intentional empty string. Only null or undefined enables projected content. tone and variant are independent. The icon input resolves a registered application icon; neuTagIcon supplies your own template and takes precedence when value is supplied. If value is absent, project the icon and label together.

Examples

Try the example and open Code to see its full implementation. Reset restores the initial demonstration state.

Examples
DraftApprovedIn reviewPendingRejected
DraftApprovedIn reviewPendingRejected
0Projected content

Try and configure

Change the options and inspect the live preview. The generated template stays next to the controls; Code contains the complete executable source.

Try and configure

Live preview

Draft

Generated template: reflects the configuration above. Open Code for the complete imports and state.

template.html
<neu-tag
  value="Draft"
  tone="neutral"
  variant="soft"
  [rounded]="false"
/>

Data and content

The application supplies the Inputs and owns any surrounding interaction. This component has no model bindings or Outputs. Content projection and icon templates are documented separately where supported.

Accessibility and keyboard

Keep a visible label and do not communicate category or status by color alone. Mark decorative SVG icons aria-hidden. Tag does not add button semantics, dismissal or keyboard focus; compose a separate accessible button if the surrounding interface needs an action.

Key
Action
— No component-level keyboard interaction; projected buttons and links keep their own keyboard behavior.

API

All public Inputs are extracted from the pinned Core package. Named types link to their definitions. Only the actual public projection areas and templates are listed below.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name
Type
Default
Template binding
Description
ariaLabelstring''[ariaLabel]Optional accessible label; prefer visible meaningful text.
iconstring | nullnull[icon]Application icon key resolved through provideNeuIconResolver; only used with a non-null value and no custom icon template.
roundedbooleanfalse[rounded]Fully rounded corners.
toneNeuTagTone'neutral'[tone]Semantic label intent.
valuestring | number | null | undefinednull[value]Text or number. 0 and empty strings remain values; null/undefined enables projection.
variantNeuTagVariant'soft'[variant]soft or solid treatment, independent of tone.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name
Mechanism
Contract
*

Category label

View example		 Content projection

Project icon and label when value is absent.

<ng-content />

Context used: —

NeuTagIconDirectiveView example Public template directive (entrypoint)ng-template[neuTagIcon]

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Projected icon and text

*

Projected icon and text
Email0

Registered icon and custom icon template

NeuTagIconDirective

Registered icon and custom icon template
ApprovedFeatured

Public Types

Open a type to inspect its definition and interface fields.

Styles and tokens

Use tone for semantic intent, variant for the surface treatment and rounded for pill corners. Core semantic text/surface tokens define the palette. The custom icon template inherits currentColor; its dimensions are supplied by the application.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token
Purpose here
Other impact
Default / fallback
--neu-border Normal control and cell borders Shared by other Core consumers; scope the override. rgba(15, 23, 42, 0.08)
--neu-error-bg Background of invalid or danger states Shared by other Core consumers; scope the override. #fee2e2
--neu-error-text Error text and danger outline/ghost Button text in both themes Shared by other Core consumers; scope the override. #991b1b
--neu-surface Main field, header or control surface Shared by other Core consumers; scope the override. #ffffff
--neu-surface-2 Secondary surfaces and alternating rows Shared by other Core consumers; scope the override. #f1f5f9
--neu-text Main text and inherited icon color Shared by other Core consumers; scope the override. #0f172a
--neu-text-muted Secondary labels and supporting content Shared by other Core consumers; scope the override. #475569
--neu-font-sans Text typography Shared by other Core consumers; scope the override. 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif