Overlay

Toast

Toast suite shell. Hosts the documentation page for the toast service + viewport + close button trio. Use `KjToastService.show()` to enqueue a toast, mount `<kj-toast-viewport>` near your trigger, and place `<kj-toast>` / `<kj-toast-close>` inside the per-call `<ng-template>`.

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjToastWrapperComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

variant

message

<kj-button (click)="show()">Show toast</kj-button>
<kj-toast-viewport />

// In your component:
private readonly toast = inject(KjToastService);
show(): void {
  this.toast.show('Saved your changes.', { variant: 'default' });
}