PHPackages avalynx/avalynx-toast - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Mail & Notifications](/categories/mail) 4. / 5. avalynx/avalynx-toast ActiveLibrary[Mail & Notifications](/categories/mail) avalynx/avalynx-toast ===================== AvalynxToast is a simple toast system for web applications. Based on Bootstrap >=5.3 without any framework dependencies. 1.0.0(today)11↑2900%MITJavaScriptCI passing Since Aug 6Pushed todayCompare [ Source](https://github.com/avalynx/avalynx-toast)[ Packagist](https://packagist.org/packages/avalynx/avalynx-toast)[ Docs](https://github.com/avalynx/avalynx-toast)[ RSS](/packages/avalynx-avalynx-toast/feed)WikiDiscussions main Synced today READMEChangelog (1)Dependencies (1)Versions (2)Used By (0) AvalynxToast ============ [](#avalynxtoast) [![npm version](https://camo.githubusercontent.com/bc11787645201f0a2c470052ddae9ef54d6154d93cce6dfd2e50ceecde2a87b6/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6e706d2f6176616c796e782d746f6173742f76657273696f6e2e737667)](https://www.npmjs.com/package/avalynx-toast)[![npm downloads](https://camo.githubusercontent.com/ccd9cb6c871f9bb934edacd612f7d4d2529b36422204feaab5c544c9a38fec5e/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6e706d2f6176616c796e782d746f6173742f646f776e6c6f61642e737667)](https://www.npmjs.com/package/avalynx-toast)[![Composer version](https://camo.githubusercontent.com/fda002912d668906d975e62597028280a441f9240c56877d263721954cd4731b/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f636f6d706f7365722f6176616c796e782f6176616c796e782d746f6173742f76657273696f6e2e737667)](https://packagist.org/packages/avalynx/avalynx-toast)[![Composer downloads](https://camo.githubusercontent.com/ccf8917136b490b8be77a20fcc3002235e63a8b11481e4b02896ee494f3543ee/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f636f6d706f7365722f6176616c796e782f6176616c796e782d746f6173742f646f776e6c6f61642e737667)](https://packagist.org/packages/avalynx/avalynx-toast)[![jsDelivr](https://camo.githubusercontent.com/e6fcf9e94438f976479024a85ad6dff5be6c0e58965bc971fc589f8972d66913/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6a7364656c6976722f6176616c796e782d746f6173742f686974732e737667)](https://www.jsdelivr.com/package/npm/avalynx-toast)[![License](https://camo.githubusercontent.com/5095de068089d39346cf0370e5979feeada4867e15415da9346f803a3d4219e6/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6e706d2f6176616c796e782d746f6173742f6c6963656e73652e737667)](LICENSE)[![Tests](https://camo.githubusercontent.com/b33e80a770ebabacb0cbac10284b8a1a8d3422031caeb5b47b8dc021bcd9198e/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6769746875622f6176616c796e782f6176616c796e782d746f6173742f74657374732e737667)](https://github.com/avalynx/avalynx-toast/actions/workflows/tests.yml)[![codecov](https://camo.githubusercontent.com/787e0a982195c337168727b8ff860cabedc824e1154ae862dc698b9e9aeb48e5/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f636f6465636f762f6176616c796e782f6176616c796e782d746f6173742f636f7665726167652e737667)](https://codecov.io/gh/avalynx/avalynx-toast)[![GitHub stars](https://camo.githubusercontent.com/5c4e0164cfc8304d7fc04329c6a42cd7d23deb4e60d5a63196969eab3123c7ad/68747470733a2f2f6a62732d6e65776d656469612e64652f62616467652f6769746875622f6176616c796e782f6176616c796e782d746f6173742f73746172732e737667)](https://github.com/avalynx/avalynx-toast) AvalynxToast is a lightweight, dependency-free toast notification system designed for web applications. It leverages Bootstrap (version 5.3 or higher) to provide a seamless integration with your project, offering a range of customizable toasts that can be positioned anywhere on the screen. Features -------- [](#features) - **Customizable Toasts**: Supports various toast types like primary, secondary, success, danger, warning, info, light, and dark. - **Optional Title**: Provide an optional title to display in the toast header. - **Flexible Positioning**: Choose from predefined positions such as top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right. - **Duration Control**: Set the duration for how long the toast should be displayed. - **Closeable Toasts**: Optionally allow users to close toasts. - **Autohide Functionality**: Toasts can automatically disappear after a certain period. - **Easy to Use**: Simple API for creating and managing toasts within your web applications. Examples -------- [](#examples) Here's a simple example of how to use AvalynxToast in your project: - [Overview](https://avalynx-toast.jbs-newmedia.de/examples/index.html) - [Simple toast](https://avalynx-toast.jbs-newmedia.de/examples/simple-toast.html) - [Toast with title](https://avalynx-toast.jbs-newmedia.de/examples/toast-with-title.html) - [Toast with title and subtitle](https://avalynx-toast.jbs-newmedia.de/examples/toast-with-subtitle.html) - [Toast with image](https://avalynx-toast.jbs-newmedia.de/examples/toast-with-image.html) - [Body-only toast (headerless)](https://avalynx-toast.jbs-newmedia.de/examples/toast-body-only.html) - [Random toasts](https://avalynx-toast.jbs-newmedia.de/examples/random-toasts.html) - [Callback on close](https://avalynx-toast.jbs-newmedia.de/examples/callback-onclose.html) - [Random toasts every 3 seconds](https://avalynx-toast.jbs-newmedia.de/examples/random-toasts-every-3s.html) Installation ------------ [](#installation) To use AvalynxToast in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxToast to work correctly. First, include Bootstrap: ``` ``` Then, include AvalynxToast: ``` ``` Replace `path/to/avalynx-toast.js` and `path/to/avalynx-toast.css` with the actual path to the files in your project. Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-toast/)) ------------------------------------------------------------------------------- [](#installation-via-jsdelivr-link) AvalynxToast is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxToast displays correctly. Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-toast)) -------------------------------------------------------------------------- [](#installation-via-npm-link) AvalynxToast is also available as a npm package. You can add it to your project with the following command: ``` npm install avalynx-toast ``` After installing, you can import AvalynxToast into your JavaScript file like this: ``` import { AvalynxToast } from 'avalynx-toast'; import 'avalynx-toast/dist/css/avalynx-toast.css'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxToast displays correctly. Installation via Symfony AssetMapper ------------------------------------ [](#installation-via-symfony-assetmapper) ``` php bin/console importmap:require avalynx-toast ``` After installing, you can import AvalynxToast into your JavaScript file like this: ``` import { AvalynxToast } from 'avalynx-toast'; import 'avalynx-toast/dist/css/avalynx-toast.css'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxToast displays correctly. Installation via Symfony AssetComposer -------------------------------------- [](#installation-via-symfony-assetcomposer) More information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle). ``` {% do addAssetComposer('avalynx/avalynx-toast/dist/css/avalynx-toast.css') %} {% do addAssetComposer('avalynx/avalynx-toast/dist/js/avalynx-toast.js') %} ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxToast displays correctly. Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-toast)) ---------------------------------------------------------------------------------------- [](#installation-via-composer-link) AvalynxToast is also available as a Composer package. You can add it to your project with the following command: ``` composer require avalynx/avalynx-toast ``` After installing, you can import AvalynxToast into your HTML file like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxToast displays correctly. Usage ----- [](#usage) To create a toast, simply instantiate a new `AvalynxToast` object with the desired options: ``` new AvalynxToast('Your message here', 'success', { title: 'Hello', subtitle: '4 mins ago', image: 'avatar.png', duration: 5000, position: 'top-right', closeable: true, autohide: true, headerless: false, width: '350px' }); ``` Options ------- [](#options) AvalynxToast allows the following options for customization: - `message`: (string) The message to display in the toast body (default: `''`). - `type`: (string) The type of toast. One of (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`) (default: `'info'`). - `options`: An object containing the following keys: - `title`: (string) The title to display in the toast header (default: `''`). - `subtitle`: (string) A muted text to display in the toast header, right of the title (default: `''`). - `image`: (string) URL of an image (e.g. avatar) to display in the toast header, left of the title (default: `''`). - `headerless`: (boolean) Render the toast without a header (only body + close button) (default: `false`). - `duration`: (number) Duration in milliseconds for the toast to be displayed (default: `5000`). - `position`: (string) Position of the toast on the screen. One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` (default: `'top-right'`). - `closeable`: (boolean) Whether the toast can be closed by the user (default: `true`). - `autohide`: (boolean) Whether the toast will hide automatically after the duration (default: `true`). - `width`: (string) The width of the toast (default: `'350px'`). - `onClose`: (function) A callback function to execute when the toast is hidden (default: `null`). Contributing ------------ [](#contributing) Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas: - Bug fixes - Feature enhancements - Documentation improvements Before submitting your pull request, please ensure that your changes are well-documented and follow the existing coding style of the project. License ------- [](#license) AvalynxToast is open-sourced software licensed under the [MIT license](LICENSE). Contact ------- [](#contact) If you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-toast/issues) or submit a pull request. Thank you for considering AvalynxToast for your project! ### Health Score 37 — LowBetter than 81% of packages Maintenance100 Actively maintained with recent releases Popularity4 Limited adoption so far Community6 Small or concentrated contributor base Maturity33 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 0d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/44b85e5ce069ccae08123600bb24204ea8fe99c8cb5cbfae108ff29c179e503d?d=identicon)[jschwind](/maintainers/jschwind) --- Top Contributors [![jschwind](https://avatars.githubusercontent.com/u/985564?v=4)](https://github.com/jschwind "jschwind (2 commits)") --- Tags avalynxbootstrapbootstrap5componentnotificationspopuptoastnotificationcomponentbootstrappopuptoastbootstrap5avalynx ### Embed Badge ![Health badge](/badges/avalynx-avalynx-toast/health.svg) ``` [![Health](https://phpackages.com/badges/avalynx-avalynx-toast/health.svg)](https://phpackages.com/packages/avalynx-avalynx-toast) ``` ### Alternatives [jason-munro/cypht Lightweight Open Source webmail written in PHP and JavaScript 1.7k160.6k](/packages/jason-munro-cypht)[mouse0270/bootstrap-growl This is a simple pluging that turns standard Bootstrap alerts into "Growl-like" notifications. 2.2k132.1k](/packages/mouse0270-bootstrap-growl)[kartik-v/yii2-widget-growl A widget to generate growl based notifications using bootstrap-growl plugin (sub repo split from yii2-widgets) 424.5M14](/packages/kartik-v-yii2-widget-growl)[kartik-v/yii2-widget-alert A widget to generate alert based notifications using bootstrap-alert plugin (sub repo split from yii2-widgets) 304.3M24](/packages/kartik-v-yii2-widget-alert)[loveorigami/yii2-notification-wrapper This module for renders a message from session flash (with ajax, pjax support and etc.) 78207.9k5](/packages/loveorigami-yii2-notification-wrapper)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2195.4k23](/packages/datatablesnet-datatablesnet-bs5) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)