@kit-ng-ui/badge

Numeric / dot / status indicator and corner ribbon for Kit UI. Mirrors ant-design's Badge and Badge.Ribbon.

Install

pnpm add @kit-ng-ui/badge @kit-ng-ui/core

Styles

// app styles.scss
@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/badge/styles' as badge;

Use

import { Component } from '@angular/core';
import { KitBadgeComponent, KitRibbonComponent } from '@kit-ng-ui/badge';

@Component({
  standalone: true,
  imports: [KitBadgeComponent, KitRibbonComponent],
  template: `
    <!-- Numeric badge over an avatar / icon -->
    <kit-badge [count]="5">
      <span class="avatar">A</span>
    </kit-badge>

    <!-- Dot only -->
    <kit-badge dot>
      <kit-icon name="bell" />
    </kit-badge>

    <!-- Standalone status -->
    <kit-badge status="processing" text="Building" />

    <!-- Corner ribbon -->
    <kit-ribbon text="Hot" color="red">
      <div class="card">...</div>
    </kit-ribbon>
  `,
})
export class Demo {}

API

<kit-badge>

| Input | Type | Default | Description | | ---------------- | ----------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------ | | count | number | 0 | Number shown in the indicator. Hidden when 0 unless [showZero]. | | showZero | boolean | false | Render the count even when it is zero. | | overflowCount | number | 99 | When count > overflowCount, the badge renders "{overflowCount}+". | | dot | boolean | false | Render a small dot instead of a count. | | status | 'default' \| 'success' \| 'processing' \| 'error' \| 'warning' \| null | null | Switches to standalone form — dot + optional text, ignores children. | | text | string \| null | null | Trailing label for the standalone status form. | | color | 'violet' \| 'blue' \| 'green' \| 'gold' \| 'red' \| string \| null | null | Preset name OR any CSS color string applied to count / dot / status-dot. | | size | 'default' \| 'small' | 'default' | Size of the count pill. | | offset | [number, number] \| null | null | [x, y] pixel offset added on top of the default top-right translate. | | title | string \| null | null | Native title attribute for the indicator. |

<kit-ribbon>

Corner banner that wraps content. Renders the banner across the top-right corner by default.

| Input | Type | Default | Description | | ----------- | ----------------------------------------------------- | ------- | -------------------------------------------------------- | | text | string (required) | — | Text rendered inside the banner. | | color | 'violet' \| 'blue' \| 'green' \| 'gold' \| 'red' \| string \| null | null | Preset name OR any CSS color string. Defaults to brand violet. | | placement | 'start' \| 'end' | 'end' | 'end' pins the banner to the right, 'start' to the left. |

Behavior notes

• [status] is a mode switch, not a modifier. When set, the badge ignores any projected children and renders an inline dot + text. This matches ant-design's "with status text" mode — it is structurally distinct from the wrapper mode. If you set [status] and wrap a child, the child silently disappears: switch to the wrapper form (no [status]) or place the child as a sibling of the badge.
• The wrapper-mode indicator uses position: absolute and is hidden when count === 0 && !dot && !showZero. The wrapped child still renders.
• Custom [color] strings are applied via inline background-color. For accessibility, pick colors with adequate contrast against the badge text (default --kit-color-text-inverse).
• The processing status dot uses a subtle pulse animation; it respects prefers-reduced-motion automatically via browser defaults — explicit handling can be added later if needed.