@kit-ng-ui/result

Full-page outcome screen for Kit UI. Mirrors ant-design's <Result>.

Install

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

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/result/styles' as result;

Use

import { KitResultComponent } from '@kit-ng-ui/result';

@Component({
  standalone: true,
  imports: [KitResultComponent],
  template: `
    <kit-result
      status="success"
      title="Submitted!"
      subTitle="Order #1234 received."
    >
      <button result-extra>Go home</button>
      <button result-extra>Track order</button>
    </kit-result>

    <!-- 404 page with built-in title + copy -->
    <kit-result status="404">
      <button result-extra>Back home</button>
    </kit-result>
  `,
})
export class Demo {}

API

| Input | Type | Default | Description | | ---------- | ----------------------------------------------------------------- | -------- | ------------------------------------------------------------------------ | | status | 'success' \| 'error' \| 'info' \| 'warning' \| '404' \| '403' \| '500' | 'info' | Status flavour; sets icon + colour + (for HTTP statuses) default copy. | | title | string \| null | null | Title line. HTTP statuses provide a default. | | subTitle | string \| null | null | Description line. HTTP statuses provide a default. | | icon | string \| null | null | Override the status icon by <kit-icon> name. |

Slots

| Selector | Purpose | | --------------------- | ---------------------------------------- | | (default) | Rich body content (paragraphs, lists). | | [result-extra] | Action row (typically two buttons). |