NEURALNG
MISCBETA

Badge

Compact counts, statuses and metadata with a standalone component, a hydration-safe arbitrary-anchor directive and native Button integration.

Logical positionsRTL readyHeadless ready

GET STARTED

Import

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

app.ts TypeScript 
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.

New899+0-2

Semantic severities

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

PrimarySecondaryNeutralInfoSuccessWarningError

Sizes, dots and projected content

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

SMMDLGVerified

Live counter

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

98

Arbitrary anchor directive

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

NN

Logical positions

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

startendtop-starttop-endbottom-startbottom-end

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.

Notifications

Unstyled and typed class slots

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

AI

Composition boundaries

Standalone

Inline status, count or projected metadata.

Directive

Decoration for arbitrary non-void anchors.

Button API

The shortest contract for action-owned badges.