Toast

import { kuiToast, provideKikitaUi } from '@kikita-labs/ui';

// Import runtime styles once, application-wide:
import '@kikita-labs/ui/styles';

<div class="basic-toast-example">
  @for (trigger of triggers; track trigger.appearance) {
    <button kuiButton type="button" shape="soft" (click)="show(trigger.appearance)">
      {{ trigger.label }}
    </button>
  }
</div>

import { signal } from '@angular/core';

import { kuiToast } from '@kikita-labs/ui';

export class UploadComponent {
  private readonly toast = kuiToast();
  protected readonly persistent = signal(true);

  protected startUpload(): void {
    const ref = this.toast.open({
      title: 'Uploading...',
      message: 'This toast is controlled by a signal.',
      persistent: this.persistent,
    });

    // Start the configured auto-dismiss timer when the upload begins.
    this.persistent.set(false);

    // Update in place when an async operation completes.
    ref.update({ title: 'Uploaded', appearance: 'success', duration: 3000 });

    // Later, close one ref by id or every toast owned by this service.
    this.toast.dismiss(ref.id);
    this.toast.dismissAll();
  }
}

<button kuiButton type="button" shape="outline" appearance="danger" (click)="deleteMessage()">
  Delete message
</button>

<div class="toast-position-example">
  @for (position of positions; track position) {
    <button kuiButton type="button" shape="soft" size="sm" (click)="show(position)">
      {{ position }}
    </button>
  }
</div>