MISCBETA

Tag

A compact classification and status primitive with semantic severities, icons, controlled removal and complete visual ownership.

Text-first semanticsControlled removalHeadless ready

GET STARTED

Import

Import the canonical standalone class from the granular Tag entry point.

import {
  NeuralTag,
  type NeuralTagRemove,
} from '@neural-ng/core/tag';

@Component({ imports: [NeuralTag] })

Basic usage

Use value for plain classifications. Rounded pills are the default, while rectangular tags remain one input away.

Angular

Signals

Headless

Semantic severities

Primary follows the runtime palette. Secondary and semantic states follow the active surface and color mode.

Primary

Secondary

Neutral

Info

Success

Warning

Error

Sizes and shapes

Human-readable size values are independent from the rounded shape.

Small

Medium

Large

Square corners

Icons and projected content

iconClass handles the common case. Omit value to project arbitrary Angular markup.

Angular

Verified

Projectedcontent

Controlled removal

Tag emits intent without mutating the owning collection. This keeps filters and server state deterministic.

Angular

Signals

Accessibility

No tag removed.

Removal states

Disabled tags remain visible and classified but cannot emit removal. The removal icon is replaceable.

Available

Locked

Custom remove icon

Unstyled and typed slots

Structural hooks and removal behavior remain while Tailwind owns every visible decision.

Agentic

Tag versus Badge

Use Tag

For categories, filters and textual lifecycle states that identify what an item is.

Use Badge

For compact counts, dots and indicators attached to another control or identity.

ACCESSIBILITY

Text first, explicit actions

Classification remains readable text. Interaction appears only when removal is enabled.

Text semantics

A non-removable Tag is inline content and does not invent an interactive role. Place it inside the consumer's existing semantic context.

Logical direction

Inline ordering and spacing follow document direction. Consumer classes should use logical start/end utilities.

PUBLIC CONTRACT

Tag API

Signal inputs, a controlled semantic event and typed visual slots.

Inputs

Input	Type	Default	Purpose
`value`	string \| null \| undefined	null	Text label; absence renders projected content.
`severity`	NeuralTagSeverity	'neutral'	Semantic visual treatment.
`size`	NeuralTagSize	'medium'	Small, medium or large density preset.
`rounded`	boolean	true	Uses the pill-shaped corner token.
`iconClass`	string \| null	null	Prepends an icon class.
`iconAriaLabel`	string \| null	null	Makes the icon meaningful instead of decorative.
`removable`	boolean	false	Adds an accessible removal control.
`disabled`	boolean	false	Disables removal and exposes aria-disabled.
`removeLabel`	string \| null	null	Overrides the generated remove accessible name.
`removeIconClass`	string	'nt nt-x'	Removal control icon class.
`unstyled`	boolean	false	Removes NeuralNg visual classes.
`tagClass`	string	''	Consumer class merged onto the root.
`classes`	NeuralTagClasses	{}	Typed classes for every visual slot.

Outputs

removedNeuralTagRemove

Emits the value and original pointer event; ownership remains controlled.

Typed class slots

rooticonlabelcontentremoveButtonremoveIcon

Public types

NeuralTagSeverity

NeuralTagSize

'small' | 'medium' | 'large'

NeuralTagRemove

{ value: string | null; originalEvent: MouseEvent }

NeuralTagClasses

Typed root, icon, label, content and removal slots.

Legacy alias

TagComponent remains exported for compatibility but is deprecated. New application and generated code must import NeuralTag.

DESIGN TOKENS

Tag tokens

Neutral responds to runtime primary, surface and mode. Every token below maps to a real component style declaration.

Base tokens

--neural-tag-height

Component block size.

--neural-tag-gap

Spacing between component items.

--neural-tag-padding

Component internal spacing.

--neural-tag-color

Component foreground color.

--neural-tag-background

Component background surface.

--neural-tag-border

Component border shorthand.

--neural-tag-radius

Component corner radius.

--neural-tag-rounded-radius

Rounded corner radius.

--neural-tag-shadow

Component box shadow.

--neural-tag-font-family

Component font family.

--neural-tag-font-size

Component font size.

--neural-tag-font-weight

Component font weight.

--neural-tag-line-height

Component line height.

--neural-tag-icon-color

Icon foreground color.

--neural-tag-icon-size

Icon width and height.

--neural-tag-content-gap

Spacing between content items.

--neural-tag-disabled-opacity

Disabled opacity.

Size tokens

--neural-tag-small-height

Small block size.

--neural-tag-small-gap

Spacing between small items.

--neural-tag-small-padding

Small internal spacing.

--neural-tag-small-font-size

Small font size.

--neural-tag-large-height

Large block size.

--neural-tag-large-gap

Spacing between large items.

--neural-tag-large-padding

Large internal spacing.

--neural-tag-large-font-size

Large font size.

Severity tokens

--neural-tag-primary-color

Primary severity foreground color.

--neural-tag-primary-background

Primary severity background surface.

--neural-tag-primary-border-color

Primary severity border color.

--neural-tag-secondary-color

Secondary severity foreground color.

--neural-tag-secondary-background

Secondary severity background surface.

--neural-tag-secondary-border-color

Secondary severity border color.

--neural-tag-neutral-color

Neutral severity foreground color.

--neural-tag-neutral-background

Neutral severity background surface.

--neural-tag-neutral-border-color

Neutral severity border color.

--neural-tag-info-color

Info severity foreground color.

--neural-tag-info-background

Info severity background surface.

--neural-tag-info-border-color

Info severity border color.

--neural-tag-success-color

Success severity foreground color.

--neural-tag-success-background

Success severity background surface.

--neural-tag-success-border-color

Success severity border color.

--neural-tag-warning-color

Warning severity foreground color.

--neural-tag-warning-background

Warning severity background surface.

--neural-tag-warning-border-color

Warning severity border color.

--neural-tag-error-color

Error severity foreground color.

--neural-tag-error-background

Error severity background surface.

--neural-tag-error-border-color

Error severity border color.

Removal tokens

--neural-tag-remove-size

Remove width and height.

--neural-tag-remove-margin

Remove outer spacing.

--neural-tag-remove-color

Remove foreground color.

--neural-tag-remove-background

Remove background surface.

--neural-tag-remove-color-hover

Hovered remove foreground color.

--neural-tag-remove-background-hover

Hovered remove background surface.

--neural-tag-remove-radius

Remove corner radius.

--neural-tag-remove-icon-size

Remove icon width and height.

--neural-tag-focus-ring

Component keyboard focus ring.

--neural-tag-focus-ring-offset

Component focus ring offset.

Import

Basic usage

Semantic severities

Sizes and shapes

Icons and projected content

Controlled removal

Removal states

Unstyled and typed slots

Tag versus Badge

Text semantics

Meaningful icons

Removal control

Disabled state

Logical direction

Inputs

Outputs

Typed class slots

Public types

Legacy alias

Base tokens

Size tokens

Severity tokens

Removal tokens