Tag
A compact classification and status primitive with semantic severities, icons, controlled removal and complete visual ownership.
GET STARTED
Import
Import the canonical standalone class from the granular Tag entry point.
Basic usage
Use value for plain classifications. Rounded pills are the default, while rectangular tags remain one input away.
Semantic severities
Primary follows the runtime palette. Secondary and semantic states follow the active surface and color mode.
Sizes and shapes
Human-readable size values are independent from the rounded shape.
Icons and projected content
iconClass handles the common case. Omit value to project arbitrary Angular markup.
Controlled removal
Tag emits intent without mutating the owning collection. This keeps filters and server state deterministic.
No tag removed.
Removal states
Disabled tags remain visible and classified but cannot emit removal. The removal icon is replaceable.
Unstyled and typed slots
Structural hooks and removal behavior remain while Tailwind owns every visible decision.
Tag versus Badge
For categories, filters and textual lifecycle states that identify what an item is.
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.
Meaningful icons
Icons are decorative by default and receive aria-hidden. Set iconAriaLabel only when the icon adds information absent from the visible label.
Removal control
removable creates a native button with a generated “Remove value” name, focus ring and keyboard activation. removeLabel can supply domain context.
Disabled state
The root exposes aria-disabled="true" and the native removal button is disabled, so no event can escape.
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
removedNeuralTagRemoveEmits the value and original pointer event; ownership remains controlled.
Typed class slots
rooticonlabelcontentremoveButtonremoveIconPublic types
NeuralTagSeverity'primary' | 'secondary' | 'neutral' | 'info' | 'success' | 'warning' | 'error'
NeuralTagSize'small' | 'medium' | 'large'
NeuralTagRemove{ value: string | null; originalEvent: MouseEvent }
NeuralTagClassesTyped 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-heightComponent block size.
--neural-tag-gapSpacing between component items.
--neural-tag-paddingComponent internal spacing.
--neural-tag-colorComponent foreground color.
--neural-tag-backgroundComponent background surface.
--neural-tag-borderComponent border shorthand.
--neural-tag-radiusComponent corner radius.
--neural-tag-rounded-radiusRounded corner radius.
--neural-tag-shadowComponent box shadow.
--neural-tag-font-familyComponent font family.
--neural-tag-font-sizeComponent font size.
--neural-tag-font-weightComponent font weight.
--neural-tag-line-heightComponent line height.
--neural-tag-icon-colorIcon foreground color.
--neural-tag-icon-sizeIcon width and height.
--neural-tag-content-gapSpacing between content items.
--neural-tag-disabled-opacityDisabled opacity.
Size tokens
--neural-tag-small-heightSmall block size.
--neural-tag-small-gapSpacing between small items.
--neural-tag-small-paddingSmall internal spacing.
--neural-tag-small-font-sizeSmall font size.
--neural-tag-large-heightLarge block size.
--neural-tag-large-gapSpacing between large items.
--neural-tag-large-paddingLarge internal spacing.
--neural-tag-large-font-sizeLarge font size.
Severity tokens
--neural-tag-primary-colorPrimary severity foreground color.
--neural-tag-primary-backgroundPrimary severity background surface.
--neural-tag-primary-border-colorPrimary severity border color.
--neural-tag-secondary-colorSecondary severity foreground color.
--neural-tag-secondary-backgroundSecondary severity background surface.
--neural-tag-secondary-border-colorSecondary severity border color.
--neural-tag-neutral-colorNeutral severity foreground color.
--neural-tag-neutral-backgroundNeutral severity background surface.
--neural-tag-neutral-border-colorNeutral severity border color.
--neural-tag-info-colorInfo severity foreground color.
--neural-tag-info-backgroundInfo severity background surface.
--neural-tag-info-border-colorInfo severity border color.
--neural-tag-success-colorSuccess severity foreground color.
--neural-tag-success-backgroundSuccess severity background surface.
--neural-tag-success-border-colorSuccess severity border color.
--neural-tag-warning-colorWarning severity foreground color.
--neural-tag-warning-backgroundWarning severity background surface.
--neural-tag-warning-border-colorWarning severity border color.
--neural-tag-error-colorError severity foreground color.
--neural-tag-error-backgroundError severity background surface.
--neural-tag-error-border-colorError severity border color.
Removal tokens
--neural-tag-remove-sizeRemove width and height.
--neural-tag-remove-marginRemove outer spacing.
--neural-tag-remove-colorRemove foreground color.
--neural-tag-remove-backgroundRemove background surface.
--neural-tag-remove-color-hoverHovered remove foreground color.
--neural-tag-remove-background-hoverHovered remove background surface.
--neural-tag-remove-radiusRemove corner radius.
--neural-tag-remove-icon-sizeRemove icon width and height.
--neural-tag-focus-ringComponent keyboard focus ring.
--neural-tag-focus-ring-offsetComponent focus ring offset.