Badge

The <smart-badge> component renders a small inline status / label indicator. It follows the Base + Standard + Wrapper pattern with an InjectionToken-based extension mechanism. The abstract BadgeBaseComponent defines the shared API — text (required), color, size, optional IBadgeOptions, cssClass (alias class), a removed output, and a remove() method that emits removed. BadgeStandardComponent is a barebones placeholder concrete implementation. BadgeComponent is the public wrapper that renders BadgeStandardComponent by default and accepts a custom replacement via BADGE_STANDARD_COMPONENT_TOKEN.

Usage

@if (visible()) {
  <smart-badge
    [text]="text"
    [color]="color"
    size="sm"
    [options]="options"
    (removed)="onRemoved()"
  />
}

Components

BadgeComponent (<smart-badge>)

Main wrapper component. Renders BadgeStandardComponent by default. When BADGE_STANDARD_COMPONENT_TOKEN is provided, renders the injected component via NgComponentOutlet. Re-emits removed from the default standard child.

BadgeStandardComponent (<smart-badge-standard>)

Barebones placeholder concrete implementation. Renders a <span> host with data-color and data-size attributes, an optional leading dot when options.withDot is true, the badge text, and an optional remove button when options.withRemove is true that emits the removed output on click. It does not include Tailwind UI styling — it exists solely as the default structural placeholder until a custom implementation is registered through the token.

BadgePresetComponent (<smart-badge-preset>)

Styled variation that extends BadgeBaseComponent and is a drop-in replacement for BadgeStandardComponent. Register it via BADGE_STANDARD_COMPONENT_TOKEN to restyle every <smart-badge>, or use the <smart-badge-preset> selector directly. It groups the solid / soft / outline color presets into a single component, selected through options.variant (default 'soft'), across the full SmartBadgeColor palette. Honors options.pill (default true → rounded-full; false → rounded-md), size (sm/md), options.withDot (leading SVG dot), and options.withRemove (remove button emitting removed). All classes are smart:-prefixed Tailwind with explicit dark: variants. The per-variant/color class recipes live in preset/preset-classes.util.ts (getBadgeClasses, getDotClasses, getRemoveClasses).

Because BadgeComponent renders injected components via NgComponentOutlet (which passes inputs by canonical name), BadgePresetComponent overrides cssClass as input<string>('') without the class alias. Bind it as [cssClass] when using the <smart-badge-preset> selector directly, or just pass class on <smart-badge> (the wrapper forwards it).

BadgeBaseComponent (abstract)

Abstract base directive for extending custom badge implementations. Exposes text as a required InputSignal<string>, color as an InputSignal<SmartBadgeColor> (default 'gray'), size as an InputSignal<'sm' | 'md'> (default 'md'), options as an InputSignal<IBadgeOptions | undefined>, cssClass as an InputSignal<string> (with alias class), removed as an OutputEmitterRef<void>, and a remove() method that emits the removed output.

API

Inputs

Outputs

IBadgeOptions

BadgeStandardComponent renders withDot (a leading bullet) and withRemove (a remove button that emits removed). variant and pill are purely visual and styled only by the preset; the standard exposes them as data-variant (default "soft") and data-pill ("true" unless pill === false) on the same root <span> that carries data-color and data-size, so you can target them with plain CSS. BadgePresetComponent styles all of variant, pill, withDot, and withRemove.

BADGE_STANDARD_COMPONENT_TOKEN

InjectionToken that allows replacing the default BadgeStandardComponent with a custom implementation. Provide a Type<BadgeBaseComponent> to override.

Extending the base class

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  ViewEncapsulation,
} from '@angular/core';

import {
  BadgeBaseComponent,
  BadgeComponent,
  BADGE_STANDARD_COMPONENT_TOKEN,
  IBadgeOptions,
} from '@smartsoft001/angular';

@Component({
  selector: 'docs-custom-badge',
  template: `
    <span [class]="containerClasses()" [attr.data-color]="color()">
      @if (options()?.withDot) {
        <span class="docs-badge__dot" aria-hidden="true">&bull;</span>
      }

      <span class="docs-badge__text">{{ text() }}</span>

      @if (options()?.withRemove) {
        <button
          type="button"
          class="docs-badge__remove"
          aria-label="Remove"
          (click)="remove()"
        >
          &times;
        </button>
      }
    </span>
  `,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomBadgeComponent extends BadgeBaseComponent {
  // NgComponentOutlet passes 'cssClass' by canonical name, not the 'class' alias.
  override cssClass = input<string>('');

  containerClasses = computed(() =>
    [
      'docs-badge',
      `docs-badge--${this.size()}`,
      this.options()?.pill === false ? '' : 'docs-badge--pill',
      this.cssClass(),
    ]
      .filter(Boolean)
      .join(' '),
  );
}

@Component({
  selector: 'docs-badge-custom-example',
  imports: [BadgeComponent],
  providers: [
    {
      provide: BADGE_STANDARD_COMPONENT_TOKEN,
      useValue: CustomBadgeComponent,
    },
  ],
  template: `
    <smart-badge
      text="In review"
      color="yellow"
      size="md"
      [options]="options"
    />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BadgeCustomExampleComponent {
  options: IBadgeOptions = { variant: 'soft', withDot: true, withRemove: true };
}

Source

The component lives in packages/shared/angular/src/lib/components/badge and is documented for Claude Code by the angular-components-badge skill.