# Toast The `` element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of sending an unobtrusive toast (or push) notification to your visitors. The `` wrapper-element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of managing a series of notifications at the bottom of the screen using the `` element. ## Use Cases The `` use cases include: * Sending an error push notification * Sending a success push notification * Sending any type of push notification ## Install [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-toast/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-toast/actions/workflows/release.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-toast?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-toast) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-toast?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) ```shell $ npm i @aurodesignsystem/auro-toast ``` ### Define Dependency in Project Defining the dependency within each project that is using the `` component. ```js import "@aurodesignsystem/auro-toast"; ``` ### Use CDN In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported. ```html ``` ## Basic Example ```html Show default notification Default notification with no error type ``` ## Custom Component Registration for Version Management There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML. When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you. However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts. You can do this by importing only the component class and using the `register(name)` method with a unique name: ```js // Import the class only import { AuroToast } from '@aurodesignsystem/auro-toast/class'; // Register with a custom name if desired AuroToast.register('custom-toast'); ``` This will create a new custom element `` that behaves exactly like ``, allowing both to coexist on the same page without interfering with each other.
Show default notification Default notification with no error type
See code ```html Show default notification Default notification with no error type ```