https://github.com/flexiui-labs/flexi-toast
Lightweight, customizable Angular toast notification component with title, message, icon types, auto-dismiss, manual close, animations, theme and positioning support.
https://github.com/flexiui-labs/flexi-toast
angular error info success swal toast warning
Last synced: about 2 months ago
JSON representation
Lightweight, customizable Angular toast notification component with title, message, icon types, auto-dismiss, manual close, animations, theme and positioning support.
- Host: GitHub
- URL: https://github.com/flexiui-labs/flexi-toast
- Owner: FlexiUI-labs
- Created: 2025-06-14T21:00:07.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-11-24T10:29:23.000Z (5 months ago)
- Last Synced: 2026-01-20T23:35:00.162Z (3 months ago)
- Topics: angular, error, info, success, swal, toast, warning
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/stackblitz-starters-v4bqrm8b?file=src%2Fmain.ts
- Size: 150 KB
- Stars: 9
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flexi Toast
Lightweight, customizable Angular toast notification component with title, message, icon types, auto-dismiss, manual close, animations, theme and positioning support.
---
## Live Demo
[](https://stackblitz.com/edit/stackblitz-starters-v4bqrm8b?file=src%2Fmain.ts)
---
## 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
```bash
npm install flexi-toast
```
---
## Usage
### 1. Import
```ts
import { FlexiToastService } from 'flexi-toast';
@Component({
...
})
export class AppComponent {
readonly #toast = inject(FlexiToastService);
```
---
### 2. Show a Toast
```ts
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
```ts
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' | CSS class or theme for toast styling |
| '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:
```css
: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
MIT © Taner Saydam / Flexi UI
> Crafted with ❤ for flexible toast notifications in Angular.