@kit-ng-ui/tag

Tag chip + checkable filter chip for Kit UI. Mirrors ant-design's Tag and Tag.CheckableTag.

Install

pnpm add @kit-ng-ui/tag @kit-ng-ui/core @kit-ng-ui/icons

Styles

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

Namespaces must be distinct from other @kit-ng-ui/<pkg>/styles imports.

Use

import { Component, signal } from '@angular/core';
import { KitTagComponent, KitCheckableTagComponent } from '@kit-ng-ui/tag';

@Component({
  standalone: true,
  imports: [KitTagComponent, KitCheckableTagComponent],
  template: `
    <kit-tag>plain</kit-tag>
    <kit-tag color="success">success</kit-tag>
    <kit-tag color="#5b21b6">custom</kit-tag>
    <kit-tag icon="github" closable (close)="hide()">closable</kit-tag>
    <kit-checkable-tag [(checked)]="picked">Books</kit-checkable-tag>
  `,
})
export class Demo {
  protected readonly picked = signal(false);
  protected hide(): void { /* ... */ }
}

API

<kit-tag>

| Input | Type | Default | Description | | ---------------- | -------------------------------------------- | ---------- | --------------------------------------------------------------------------------- | | color | KitTagPresetColor \| string \| null | null | Preset name OR any CSS color string. See preset table below. | | size | 'sm' \| 'md' | 'md' | Tag height. | | bordered | boolean | true | When false, removes the border for a filled chip look. | | closable | boolean | false | Renders a close button on the trailing edge. | | icon | string \| null | null | Icon name from the registry, rendered before the label. | | closeIcon | string | 'close' | Icon name for the close trigger. | | closeAriaLabel | string | 'Close' | a11y label for the close button. | | visible | boolean | true | When false, the tag is unmounted entirely. |

| Output | Payload | Description | | ------- | ------------- | -------------------------------------------------------------------- | | close | MouseEvent | Fires on close-button click. The host owns the hide decision. |

Preset colors

| Preset | Background / border / text source | | ------------ | ----------------------------------------- | | default | --kit-color-fill / border / text | | success | --kit-color-success-* | | processing | --kit-color-info-* | | error | --kit-color-error-* | | warning | --kit-color-warning-* | | violet | --kit-color-brand-* (brand violet ramp) | | blue | --kit-color-info-* | | green | --kit-color-success-* | | gold | --kit-color-warning-* | | red | --kit-color-error-* |

Any other string passed to [color] is treated as a CSS color and rendered via color-mix for background/border with the raw value for text.

<kit-checkable-tag>

Toggleable chip for filters / segmented selection.

| Input | Type | Default | Description | | ---------- | ---------------- | -------- | --------------------------------- | | checked | boolean (model)| false | Two-way bindable via [(checked)]. | | size | 'sm' \| 'md' | 'md' | Tag height. | | disabled | boolean | false | Disabled state. |

| Output | Payload | Description | | --------- | ---------- | ------------------------------------ | | change | boolean | Fires after checked flips, with the new value. |

Behavior notes

• The close button does NOT auto-hide the tag. The host decides whether to set [visible]="false" or *ngIf the tag out — this keeps the component free of "auto-close vs controlled" ambiguity.
• Custom colors use color-mix(in srgb, <color> 12%/40%, var(--kit-color-bg)) for background/border tint. Browsers without color-mix support fall back to the raw color (still readable, just bolder).
• <kit-checkable-tag> renders a native <button> and uses aria-pressed so screen readers announce the toggle state without extra wiring.