GET STARTED

Import

Import the canonical component and directive from the granular entry point.

import {
  NeuralBadge,
  NeuralBadgeDirective,
} from '@neural-ng/core/badge';

@Component({ imports: [NeuralBadge, NeuralBadgeDirective] })

Values and numeric caps

Strings and every finite number are valid. max only caps presentation; the uncapped number remains the accessible value.

Semantic severities

Every semantic role follows the active primary, surface and color-mode tokens.

Sizes, dots and projected content

Three presets, optional square geometry, meaningful dots and rich projected content cover compact metadata without a second component.

Live counter

Signal values update directly. Use a polite live region only when the update deserves an announcement.

Arbitrary anchor directive

NeuralBadgeDirective creates the real Badge component on any suitable host after hydration.

Logical positions

Inline start/end participate in layout. Four corner positions overlay the anchor and mirror automatically in RTL.

Button integration

When a Badge belongs to an action, use NeuralButton's shorter API. It delegates to the same directive contract.

Visibility and empty values

Zero is content. A directive value of null or undefined removes its generated host; badgeHidden is the explicit component visibility switch.

Unstyled and typed class slots

Structural hooks remain while all NeuralNg visual ownership moves to consumer classes.

Composition boundaries

Labels and caps

A capped 99+ Badge exposes the real numeric value through its generated aria-label. Set ariaLabel when the number needs context, and keep the anchor's own name complete.

Meaningful dots

A decorative dot needs no announcement. A dot that means online, unread or failed must receive ariaLabel; development mode warns when it is missing.

Live regions

ariaLive="off" is intentionally the default. Prefer polite for user-relevant background counts and reserve assertive for truly urgent changes.

Anchor semantics

The directive does not change role, focus or keyboard behavior. Use a real Button for actions. Wrap void or replaced elements such as img and input before applying the directive.

RTL and logical placement

start and end are logical, not physical. All corner offsets use logical inset properties and follow the document direction without a second API.

NeuralBadge inputs

NeuralBadgeDirective inputs

Typed class slots

Public types

Base tokens

Severity tokens

Anchor tokens