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

Badge

Show a compact, readable status with projected content.

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

Usage

Badge receives its label as projected content, not a value input. tone expresses semantic intent and variant selects soft or outline. size controls compactness, pill controls rounded corners, and dot adds a decorative status indicator. It does not behave as a notification counter attached to another element.

Examples

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

Examples
DraftApprovedIn reviewPendingRejected
DraftApprovedIn reviewPendingRejected

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-badge
  tone="neutral"
  variant="soft"
  size="md"
  [dot]="false"
  [pill]="true"
>
  Draft
</neu-badge>

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

Always include meaningful visible text. A dot or a color alone cannot explain the status. Badge is not interactive and does not receive keyboard focus; use a button when the user must change or filter the status. Use a status region outside the badge only when an update needs to be announced.

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
dotbooleanfalse[dot]Adds a decorative dot before the projected label.
pillbooleantrue[pill]Fully rounded corners.
sizeNeuBadgeSize'md'[size]Compact sm or default md size.
toneNeuBadgeTone'neutral'[tone]Semantic status intent.
variantNeuBadgeVariant'soft'[variant]soft background or transparent outline.

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
*

Status label

View example		 Content projection

Explain the status with visible text, not only color.

<ng-content />

Context used: —

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

Content projection

*

Content projection
3 messagesService available

Public Types

Open a type to inspect its definition and interface fields.

Styles and tokens

Tone uses semantic surfaces and readable text; outline keeps the background transparent. size and pill are the public shape controls. Test all tones in both themes and retain the text even when dot is enabled.

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 Invalid field or danger-action color Shared by other Core consumers; scope the override. #dc2626
--neu-error-bg Background of invalid or danger states Shared by other Core consumers; scope the override. #fee2e2
--neu-radius Control corner radius Shared by other Core consumers; scope the override. 8px
--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-disabled Text of disabled controls Shared by other Core consumers; scope the override. #64748b