@kit-ng-ui/alert

Inline / banner notice for Kit UI. Mirrors ant-design's Alert.

Install

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

Styles

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

Use

import { Component } from '@angular/core';
import { KitAlertComponent } from '@kit-ng-ui/alert';

@Component({
  standalone: true,
  imports: [KitAlertComponent],
  template: `
    <!-- Basic -->
    <kit-alert type="success" message="Saved." />

    <!-- With description + icon + close -->
    <kit-alert
      type="warning"
      message="Heads-up"
      description="Your session expires in 5 minutes."
      showIcon
      closable
      (close)="onClose($event)"
    />

    <!-- Banner mode -->
    <kit-alert type="info" banner message="Read-only mode" />

    <!-- Action slot -->
    <kit-alert type="error" message="Network is down." [actionTpl]="retry" />
    <ng-template #retry><button>Retry</button></ng-template>
  `,
})
export class Demo {
  onClose(event: MouseEvent) {
    // call event.preventDefault() to keep the alert mounted
  }
}

API

<kit-alert>

| Input | Type | Default | Description | | ---------------- | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------- | | actionTpl | TemplateRef \| null | null | Trailing slot for an action button or link. | | banner | boolean | false | Banner mode — full-width, no horizontal border, no rounded corners. | | closable | boolean | false | Render the close button. | | closeAriaLabel | string | 'Close'| Native aria-label for the close button. | | closeText | string \| null | null | Replaces the × icon with text inside the close button. | | closeTextTpl | TemplateRef \| null | null | Template equivalent of [closeText]. | | description | string \| null | null | Long-form description. | | descriptionTpl | TemplateRef \| null | null | Template equivalent of [description]. | | icon | string \| null | null | Override the leading icon (from the kit-icon registry). | | iconTpl | TemplateRef \| null | null | Custom leading-icon template. Wins over [icon]. | | message | string \| null | null | Short headline. | | messageTpl | TemplateRef \| null | null | Template equivalent of [message]. | | showIcon | boolean | false | Show the leading status icon. | | type | 'success' \| 'info' \| 'warning' \| 'error' | 'info' | Visual + semantic type. Sets background, border, and default icon color. |

| Output | Type | Description | | ------- | -------------------------- | --------------------------------------------------------------------------------- | | close | EventEmitter<MouseEvent> | Fires before the alert is hidden. Call preventDefault() on the event to keep it visible. |

Behavior notes

• role="alert" is always applied. Inserting an alert into the DOM announces it to assistive tech; do not toggle it via CSS display: none if you want it announced.
• Default icon is type-driven: check-circle for success, info for info, exclamation-circle for warning, error for error. Override via [icon] or [iconTpl].
• Closable is uncontrolled — clicking the close button hides the alert and fires (close) then (afterClose). For a controlled form, keep the alert mounted only when a parent signal is true.
• Banner mode is meant for page-level read-only / draft-mode / staging-environment indicators. Use it sparingly — a banner per page max.