All blocks
Block
Notification stack
A toast/notification centre composed of stacked system-messages. Click Add to push a new notice; close any to dismiss it.
Add · dismiss · variant mix
Connected to model gpt-5.
Tool call timed out after 60s.
<div class="flex flex-col gap-2">
@for (n of notices(); track n.id) {
<pk-system-message
[text]="n.text"
[variant]="n.variant"
[fill]="true"
ctaLabel="Dismiss"
(ctaClicked)="dismiss(n.id)"
/>
}
</div>
// Component
interface Notice {
id: number;
text: string;
variant: 'action' | 'error' | 'warning';
}
protected readonly notices = signal<Notice[]>([]);
private nextId = 1;
protected add(template: Omit<Notice, 'id'>): void {
this.notices.update(list => [{ id: this.nextId++, ...template }, ...list]);
}
protected dismiss(id: number): void {
this.notices.update(list => list.filter(n => n.id !== id));
}