Flexi Toast

Lightweight, customizable Angular toast notification component with title, message, icon types, auto-dismiss, manual close, animations, theme and positioning support.

Live Demo

Features

🟢 Success, 🔴 Error, 🔵 Info, 🟠 Warning toasts
⏲️ Configurable timeout & auto-dismiss
🔢 Multiple stack positions: top-right, bottom-left, etc.
🎨 Customizable styles & animations
♿️ ARIA roles & keyboard support
🔧 Full customization via inputs & CSS variables

Installation

npm install flexi-toast

Usage

1. Import

import { FlexiToastService } from 'flexi-toast';

@Component({
  ...
})
export class AppComponent {
  readonly #toast = inject(FlexiToastService);

2. Show a Toast

import { ToastService } from 'flexi-toast';

@Component({ /* ... */ })
export class AppComponent {
  readonly #toast = inject(FlexiToastService);

  notify() {
    this.toast.show('Success','This is a message','success'); //icon => success | info | warning | error
  }
}

3. Show a Swal

import { ToastService } from 'flexi-toast';

@Component({ /* ... */ })
export class AppComponent {
  readonly #toast = inject(FlexiToastService);

  swal(){
    this.#toast.showSwal("Question?","This is a question?","Yes",() => {
      this.#toast.showToast("Info","This is a info message", "info");
    },"No")
  }
}

API

Option	Type	Default	Description
'icon'	FlexiToastIconType	'success'	Icon to display on the toast
'autoClose'	boolean	true	Automatically close the toast after timeout
'timeOut'	number	3000	Time in milliseconds before auto-close
'showProgressBar'	boolean	true	Show a progress bar indicator
'showToastCloseBtn'	boolean	true	Show a close (×) button on the toast
'showSwalCloseBtn'	boolean	false	Show a close button in SweetAlert dialogs
'preventDuplicate'	boolean	false	Prevent showing duplicate toasts
'position'	FlexiToastPositionType	'bottom-right'	Position of the toast container
'themeClass'	FlexiToastThemeClassType	string	'light'
'cancelBtnText'	string	'Vazgeç'	Text for the SweetAlert cancel button
'confirmBtnText'	string	'Sil'	Text for the SweetAlert confirm button
'swalContentThemeClass'	FlexiSwalContentThemeClass	'default'	CSS class for SweetAlert content styling

Styling & CSS Variables

Define your own colors and styling:

:root {
  --toast-bg-success: '#dff0d8';
  --toast-bg-error:   '#f2dede';
  --toast-bg-info:    '#d9edf7';
  --toast-bg-warning: '#fcf8e3';
  --toast-color:      '#333';
  --toast-padding:    '12px 16px';
  --toast-border-radius: '4px';
}

License

Crafted with ❤ for flexible toast notifications in Angular.

Package detail

flexi-toast

readme