@styloviz/toast

Imperative toast stack with 4 variants, 6 anchor positions, action callbacks and an auto-dismiss timer.

Part of the StyloViz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/core @styloviz/toast

Requires @angular/core and @angular/common >= 21. Also needs @styloviz/core — listed above so no extra step is required on npm (on pnpm/yarn, list it yourself). Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvToastHostComponent } from '@styloviz/toast';

@Component({
  standalone: true,
  imports: [SvToastHostComponent],
  template: `
    // place one host, then call the service
    <sv-toast-host position="top-right" />
    
    toast.success('Saved!');
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | position | ToastPosition | 'top-right' | Where the stack is anchored on screen. | | maxVisible | number | 5 | Maximum number of toasts visible simultaneously. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/toast

License

MIT