Toast — Smart UI JavaScript API

Toast — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Toast - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-toast id="demo-toast"></smart-toast>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.toast.js';

    const el = document.getElementById('demo-toast');
    if (el) {

      el.position = 'top-left';
      el.autoOpen = true;
      el.showCloseButton = true;
      el.type = 'mail';
      el.value = 'You have 2 new messages';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Toast   Framework: JavaScript   Selector: smart-toast

API counts: 22 properties, 4 methods, 7 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: closeAll(), closeItem(), closeLast(), open()

Common events: itemClick, close, open, swipebottom, swipeleft, swiperight

Module hint: smart-webcomponents/source/modules/smart.toast.js

The toast component is like an alert box that is only shown for a couple of seconds when something happens.

Class

Toast

Toast

The toast component is like an alert box that is only shown for a couple of seconds when something happens.

Selector

smart-toast

Quick picks

disabledopenvalue

Properties

AanimationSets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled. Otherwise, specifying a valid animation mode enables corresponding transition effects.
AappendToDefines the container element in which new toast notifications will appear. The value can be either an HTMLElement directly, or a string representing the id of a DOM element. This property determines where toast items are rendered in the DOM.Note: When used together with the modal and position properties, container takes precedence over position but has lower priority than modal. This means that if modal is enabled, it overrides container; if not, the specified container is used instead of the position property.
AautoCloseDetermines whether the toast notification will automatically close after the duration specified by the autoCloseDelay property. If enabled, the toast will dismiss itself once the set time has elapsed; otherwise, it will remain visible until manually closed by the user.
AautoCloseDelaySpecifies or retrieves the time interval (in milliseconds) after which the toast notification will automatically dismiss itself. This property is effective only when the autoClose property is set to true; otherwise, the toast will remain visible until manually closed.
AautoOpenDetermines whether the toast notification should automatically appear as soon as the widget is initialized, without requiring any user interaction or additional trigger.
DdisabledWhen the disabled property is set to true, all user interactions with toast items—such as clicking, hovering, or dismissing—will be prevented. The toast items will appear inactive and will not respond to any user actions until disabled is set to false.
IiconClassSpecifies a custom CSS class name or multiple class names to override the default icon styling. To apply multiple classes, separate each class name with a space (e.g., "fa fa-user"). This property is particularly useful when integrating icons from third-party icon libraries like Bootstrap Icons, Font Awesome, or Material Icons, allowing you to fully control the icon's appearance by leveraging external style definitions.
IitemClassAllows you to add one or more custom CSS classes to Toast items by specifying class names separated with spaces. This enables you to style individual Toasts using predefined classes from third-party CSS frameworks (such as Bootstrap), or your own custom styles, for greater flexibility and consistency in appearance.
IitemTemplateDefines a custom template for rendering each item, allowing you to control the appearance and structure of items displayed in the list or component. This enables the use of personalized HTML, styling, and dynamic content for each item, rather than relying on the default rendering format.
LlocaleSpecifies or retrieves the current language setting for localization purposes. This property determines which set of translations from the messages object is used, ensuring that the appropriate language-specific content is displayed or accessed.
LlocalizeFormatFunctionCallback function used by the localization module to handle language-specific operations, such as loading translation files, switching languages, or updating localized content dynamically within the application.
MmessagesDefines or retrieves an object containing customizable text strings used throughout the widget’s user interface, enabling localization and internationalization of displayed messages, labels, and prompts. Typically used alongside the locale property to support multiple languages and regional formats. This property allows developers to override default strings with translations or custom wording suitable for different locales.
MmodalWhen modal mode is enabled, the toast notification is displayed at the center of the screen, overlaying all other page content. The modal property takes precedence over both the position and appendTo properties. If modal is set to true, any values specified for position and appendTo will be ignored, and the toast will always appear centered in a modal overlay.
PpositionSpecifies the area of the browser window where the toast notification will be displayed (for example, "top-right" or "bottom-center"). Note: This position setting is ignored if the appendTo property is defined or if modal mode is enabled, as these options control the toast’s placement instead.
RreadonlyIf the element has the "readonly" attribute, users cannot modify its value; the content is visible but cannot be changed or edited through user input. However, users may still be able to interact with the element in limited ways, such as copying its text, but any form of altering the value is disabled.
RrightToLeftDefines or retrieves a value that specifies whether the element's alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's layout and text direction are modified to accommodate locales that use RTL scripts.
SshowCloseButtonDetermines whether the close button is displayed on the toast notification. When set to true, the close button appears, allowing users to manually dismiss the toast. When set to false, the close button is hidden, and the toast can only be dismissed programmatically or by other means. This property can be used to retrieve the current visibility state or update it as needed.
TthemeSpecifies the theme to be applied to the element. The selected theme controls the visual appearance of the element, including colors, fonts, and overall styling, ensuring a consistent look and feel throughout the user interface.
TtypeApplies custom CSS styles and assigns a designated icon to each toast notification item for improved appearance and user experience.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation or programmatic focus methods (such as calling element.focus()).
UunlockKeyDefines or retrieves the unlockKey, a unique value required to activate or gain access to the product’s features or content.
VvalueAssigns a specific text value to the toast notification, determining the message displayed to users within the toast item.

Events

CcloseThis event is triggered whenever a toast notification is closed, either by user interaction (such as clicking the close button) or programmatically through code. It allows developers to execute custom logic or cleanup actions after the toast has been dismissed from the user interface.
IitemClickThis event is triggered when a user clicks on a toast notification. It allows you to execute custom logic in response to the user's interaction with the toast item, such as redirecting to a specific page, dismissing the notification, or performing other actions.
OopenThis event is triggered each time a toast notification becomes visible to the user, indicating that the toast item has been fully opened and is now displayed on the screen.
SswipebottomThis event is triggered when a user performs a swipe-down gesture (swipe bottom) on a toast notification item. It can be used to detect and handle user interactions that involve dismissing or interacting with toast messages via a downward swipe.
SswipeleftThis event is triggered when a user performs a swipe left gesture on a toast notification item. It allows you to execute custom actions in response to the swipe left interaction with the toast component.
SswiperightThis event is triggered when a user performs a swipe-right gesture on a toast notification item. It allows you to handle interactions that occur specifically when the user swipes right on a toast component.
SswipetopThis event is triggered when a user performs an upward swipe gesture (swipe top) on a toast notification item.

Methods

CcloseAllCloses all currently displayed toast notifications, ensuring that any active toast messages are dismissed from the user interface.
CcloseItemCloses a specific toast notification. This action targets and dismisses the designated toast message from the user interface, ensuring that only the selected toast item is removed without affecting others.
CcloseLastCloses the most recently displayed toast notification, removing it from the user's view.
OopenDisplays a new toast notification and returns the corresponding smart-toast-item instance representing the newly created toast. This allows further manipulation or customization of the toast after it appears.

Properties

animationSets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled. Otherwise, specifying a valid animation mode enables corresponding transition effects."none" | "simple" | "advanced"

Sets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled. Otherwise, specifying a valid animation mode enables corresponding transition effects.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-toast animation="none"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-toast');
const animation = el.animation;

appendToDefines the container element in which new toast notifications will appear. The value can be either an HTMLElement directly, or a string representing the id of a DOM element. This property determines where toast items are rendered in the DOM.Note: When used together with the modal and position properties, container takes precedence over position but has lower priority than modal. This means that if modal is enabled, it overrides container; if not, the specified container is used instead of the position property.string

Defines the container element in which new toast notifications will appear. The value can be either an HTMLElement directly, or a string representing the id of a DOM element. This property determines where toast items are rendered in the DOM.

Note: When used together with the modal and position properties, container takes precedence over position but has lower priority than modal. This means that if modal is enabled, it overrides container; if not, the specified container is used instead of the position property.

Default value

"null"

Examples

Markup and runtime examples for appendTo:

HTML:

<smart-toast append-to="container"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.appendTo = "newContainer";

Read the current value:

const el = document.querySelector('smart-toast');
const appendTo = el.appendTo;

autoCloseDetermines whether the toast notification will automatically close after the duration specified by the autoCloseDelay property. If enabled, the toast will dismiss itself once the set time has elapsed; otherwise, it will remain visible until manually closed by the user.boolean

Determines whether the toast notification will automatically close after the duration specified by the autoCloseDelay property. If enabled, the toast will dismiss itself once the set time has elapsed; otherwise, it will remain visible until manually closed by the user.

Default value

false
Try a demo showcasing the autoClose property.

Examples

Markup and runtime examples for autoClose:

HTML attribute:

<smart-toast auto-close></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.autoClose = false;

Read the current value:

const el = document.querySelector('smart-toast');
const autoClose = el.autoClose;

autoCloseDelaySpecifies or retrieves the time interval (in milliseconds) after which the toast notification will automatically dismiss itself. This property is effective only when the autoClose property is set to true; otherwise, the toast will remain visible until manually closed.number

Specifies or retrieves the time interval (in milliseconds) after which the toast notification will automatically dismiss itself. This property is effective only when the autoClose property is set to true; otherwise, the toast will remain visible until manually closed.

Default value

3000

Examples

Markup and runtime examples for autoCloseDelay:

HTML:

<smart-toast auto-close-delay="4000"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.autoCloseDelay = 5000;

Read the current value:

const el = document.querySelector('smart-toast');
const autoCloseDelay = el.autoCloseDelay;

autoOpenDetermines whether the toast notification should automatically appear as soon as the widget is initialized, without requiring any user interaction or additional trigger.boolean

Determines whether the toast notification should automatically appear as soon as the widget is initialized, without requiring any user interaction or additional trigger.

Default value

false

Examples

Markup and runtime examples for autoOpen:

HTML attribute:

<smart-toast auto-open></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.autoOpen = false;

Read the current value:

const el = document.querySelector('smart-toast');
const autoOpen = el.autoOpen;

disabledWhen the disabled property is set to true, all user interactions with toast items—such as clicking, hovering, or dismissing—will be prevented. The toast items will appear inactive and will not respond to any user actions until disabled is set to false.boolean

When the disabled property is set to true, all user interactions with toast items—such as clicking, hovering, or dismissing—will be prevented. The toast items will appear inactive and will not respond to any user actions until disabled is set to false.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-toast disabled></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-toast');
const disabled = el.disabled;

iconClassSpecifies a custom CSS class name or multiple class names to override the default icon styling. To apply multiple classes, separate each class name with a space (e.g., "fa fa-user"). This property is particularly useful when integrating icons from third-party icon libraries like Bootstrap Icons, Font Awesome, or Material Icons, allowing you to fully control the icon's appearance by leveraging external style definitions.string

Specifies a custom CSS class name or multiple class names to override the default icon styling. To apply multiple classes, separate each class name with a space (e.g., "fa fa-user"). This property is particularly useful when integrating icons from third-party icon libraries like Bootstrap Icons, Font Awesome, or Material Icons, allowing you to fully control the icon's appearance by leveraging external style definitions.

Default value

"null"

Examples

Markup and runtime examples for iconClass:

HTML:

<smart-toast icon-class="material-icons"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.iconClass = "glyphicon glyphicon-cloud";

Read the current value:

const el = document.querySelector('smart-toast');
const iconClass = el.iconClass;

itemClassAllows you to add one or more custom CSS classes to Toast items by specifying class names separated with spaces. This enables you to style individual Toasts using predefined classes from third-party CSS frameworks (such as Bootstrap), or your own custom styles, for greater flexibility and consistency in appearance.string

Allows you to add one or more custom CSS classes to Toast items by specifying class names separated with spaces. This enables you to style individual Toasts using predefined classes from third-party CSS frameworks (such as Bootstrap), or your own custom styles, for greater flexibility and consistency in appearance.

Default value

"null"

Examples

Markup and runtime examples for itemClass:

HTML:

<smart-toast item-class="mat-elevation-z6"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.itemClass = "custom-toast red";

Read the current value:

const el = document.querySelector('smart-toast');
const itemClass = el.itemClass;

itemTemplateDefines a custom template for rendering each item, allowing you to control the appearance and structure of items displayed in the list or component. This enables the use of personalized HTML, styling, and dynamic content for each item, rather than relying on the default rendering format.string

Defines a custom template for rendering each item, allowing you to control the appearance and structure of items displayed in the list or component. This enables the use of personalized HTML, styling, and dynamic content for each item, rather than relying on the default rendering format.

Default value

"null"
Try a demo showcasing the itemTemplate property.

Examples

Markup and runtime examples for itemTemplate:

HTML:

<smart-toast item-template="templateId1"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.itemTemplate = "templateId2";

Read the current value:

const el = document.querySelector('smart-toast');
const itemTemplate = el.itemTemplate;

localeSpecifies or retrieves the current language setting for localization purposes. This property determines which set of translations from the messages object is used, ensuring that the appropriate language-specific content is displayed or accessed.string

Specifies or retrieves the current language setting for localization purposes. This property determines which set of translations from the messages object is used, ensuring that the appropriate language-specific content is displayed or accessed.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-toast locale="de"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.locale = "fr";

Read the current value:

const el = document.querySelector('smart-toast');
const locale = el.locale;

localizeFormatFunctionCallback function used by the localization module to handle language-specific operations, such as loading translation files, switching languages, or updating localized content dynamically within the application.function | null

Callback function used by the localization module to handle language-specific operations, such as loading translation files, switching languages, or updating localized content dynamically within the application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-toast localize-format-function="function(){return '...'}"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.localizeFormatFunction = "function(){return '...'}";

Read the current value:

const el = document.querySelector('smart-toast');
const localizeFormatFunction = el.localizeFormatFunction;

messagesDefines or retrieves an object containing customizable text strings used throughout the widget’s user interface, enabling localization and internationalization of displayed messages, labels, and prompts. Typically used alongside the locale property to support multiple languages and regional formats. This property allows developers to override default strings with translations or custom wording suitable for different locales.object

Defines or retrieves an object containing customizable text strings used throughout the widget’s user interface, enabling localization and internationalization of displayed messages, labels, and prompts. Typically used alongside the locale property to support multiple languages and regional formats. This property allows developers to override default strings with translations or custom wording suitable for different locales.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-toast messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Read the current value:

const el = document.querySelector('smart-toast');
const messages = el.messages;

modalWhen modal mode is enabled, the toast notification is displayed at the center of the screen, overlaying all other page content. The modal property takes precedence over both the position and appendTo properties. If modal is set to true, any values specified for position and appendTo will be ignored, and the toast will always appear centered in a modal overlay.boolean



When modal mode is enabled, the toast notification is displayed at the center of the screen, overlaying all other page content. The modal property takes precedence over both the position and appendTo properties. If modal is set to true, any values specified for position and appendTo will be ignored, and the toast will always appear centered in a modal overlay.

Default value

false
Try a demo showcasing the modal property.

Examples

Markup and runtime examples for modal:

HTML attribute:

<smart-toast modal></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.modal = false;

Read the current value:

const el = document.querySelector('smart-toast');
const modal = el.modal;

positionSpecifies the area of the browser window where the toast notification will be displayed (for example, "top-right" or "bottom-center"). Note: This position setting is ignored if the appendTo property is defined or if modal mode is enabled, as these options control the toast’s placement instead."top-left" | "top-right" | "bottom-left" | "bottom-right"

Specifies the area of the browser window where the toast notification will be displayed (for example, "top-right" or "bottom-center"). Note: This position setting is ignored if the appendTo property is defined or if modal mode is enabled, as these options control the toast’s placement instead.

Default value

"top-right"
Try a demo showcasing the position property.

Examples

Markup and runtime examples for position:

HTML:

<smart-toast position="bottom-left"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.position = "bottom-right";

Read the current value:

const el = document.querySelector('smart-toast');
const position = el.position;

readonlyIf the element has the "readonly" attribute, users cannot modify its value; the content is visible but cannot be changed or edited through user input. However, users may still be able to interact with the element in limited ways, such as copying its text, but any form of altering the value is disabled.boolean

If the element has the "readonly" attribute, users cannot modify its value; the content is visible but cannot be changed or edited through user input. However, users may still be able to interact with the element in limited ways, such as copying its text, but any form of altering the value is disabled.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-toast readonly></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.readonly = true;

Read the current value:

const el = document.querySelector('smart-toast');
const readonly = el.readonly;

rightToLeftDefines or retrieves a value that specifies whether the element's alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's layout and text direction are modified to accommodate locales that use RTL scripts.boolean

Defines or retrieves a value that specifies whether the element's alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's layout and text direction are modified to accommodate locales that use RTL scripts.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-toast right-to-left></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-toast');
const rightToLeft = el.rightToLeft;

showCloseButtonDetermines whether the close button is displayed on the toast notification. When set to true, the close button appears, allowing users to manually dismiss the toast. When set to false, the close button is hidden, and the toast can only be dismissed programmatically or by other means. This property can be used to retrieve the current visibility state or update it as needed.boolean

Determines whether the close button is displayed on the toast notification. When set to true, the close button appears, allowing users to manually dismiss the toast. When set to false, the close button is hidden, and the toast can only be dismissed programmatically or by other means. This property can be used to retrieve the current visibility state or update it as needed.

Default value

false

Examples

Markup and runtime examples for showCloseButton:

HTML attribute:

<smart-toast show-close-button></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.showCloseButton = false;

Read the current value:

const el = document.querySelector('smart-toast');
const showCloseButton = el.showCloseButton;

themeSpecifies the theme to be applied to the element. The selected theme controls the visual appearance of the element, including colors, fonts, and overall styling, ensuring a consistent look and feel throughout the user interface.string

Specifies the theme to be applied to the element. The selected theme controls the visual appearance of the element, including colors, fonts, and overall styling, ensuring a consistent look and feel throughout the user interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-toast theme="blue"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-toast');
const theme = el.theme;

typeApplies custom CSS styles and assigns a designated icon to each toast notification item for improved appearance and user experience."info" | "warning" | "success" | "error" | "mail" | "time" | null

Applies custom CSS styles and assigns a designated icon to each toast notification item for improved appearance and user experience.

Default value

"info"
Try a demo showcasing the type property.

Examples

Markup and runtime examples for type:

HTML:

<smart-toast type="warning"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.type = "success";

Read the current value:

const el = document.querySelector('smart-toast');
const type = el.type;

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation or programmatic focus methods (such as calling element.focus()).boolean

When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible through keyboard navigation or programmatic focus methods (such as calling element.focus()).

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-toast unfocusable></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-toast');
const unfocusable = el.unfocusable;

unlockKeyDefines or retrieves the unlockKey, a unique value required to activate or gain access to the product’s features or content.string

Defines or retrieves the unlockKey, a unique value required to activate or gain access to the product’s features or content.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-toast unlock-key=""></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-toast');
const unlockKey = el.unlockKey;

valueAssigns a specific text value to the toast notification, determining the message displayed to users within the toast item.any

Assigns a specific text value to the toast notification, determining the message displayed to users within the toast item.

Default value

""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-toast value="Toast !"></smart-toast>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-toast');
el.value = "Toast !!!";

Read the current value:

const el = document.querySelector('smart-toast');
const value = el.value;

Events

closeThis event is triggered whenever a toast notification is closed, either by user interaction (such as clicking the close button) or programmatically through code. It allows developers to execute custom logic or cleanup actions after the toast has been dismissed from the user interface.CustomEvent

This event is triggered whenever a toast notification is closed, either by user interaction (such as clicking the close button) or programmatically through code. It allows developers to execute custom logic or cleanup actions after the toast has been dismissed from the user interface.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the close event.

Examples

Listen for close using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-toast')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

itemClickThis event is triggered when a user clicks on a toast notification. It allows you to execute custom logic in response to the user's interaction with the toast item, such as redirecting to a specific page, dismissing the notification, or performing other actions.CustomEvent

This event is triggered when a user clicks on a toast notification. It allows you to execute custom logic in response to the user's interaction with the toast item, such as redirecting to a specific page, dismissing the notification, or performing other actions.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onItemClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for itemClick using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-toast')?.addEventListener('itemClick', (event) => {
	// event handling code goes here.
})

openThis event is triggered each time a toast notification becomes visible to the user, indicating that the toast item has been fully opened and is now displayed on the screen.CustomEvent

This event is triggered each time a toast notification becomes visible to the user, indicating that the toast item has been fully opened and is now displayed on the screen.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the open event.

Examples

Listen for open using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-toast')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

swipebottomThis event is triggered when a user performs a swipe-down gesture (swipe bottom) on a toast notification item. It can be used to detect and handle user interactions that involve dismissing or interacting with toast messages via a downward swipe.CustomEvent

This event is triggered when a user performs a swipe-down gesture (swipe bottom) on a toast notification item. It can be used to detect and handle user interactions that involve dismissing or interacting with toast messages via a downward swipe.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipebottom

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipebottom event.

Examples

Listen for swipebottom using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-toast')?.addEventListener('swipebottom', (event) => {
	// event handling code goes here.
})

swipeleftThis event is triggered when a user performs a swipe left gesture on a toast notification item. It allows you to execute custom actions in response to the swipe left interaction with the toast component.CustomEvent

This event is triggered when a user performs a swipe left gesture on a toast notification item. It allows you to execute custom actions in response to the swipe left interaction with the toast component.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipeleft

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipeleft event.

Examples

Listen for swipeleft using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-toast')?.addEventListener('swipeleft', (event) => {
	// event handling code goes here.
})

swiperightThis event is triggered when a user performs a swipe-right gesture on a toast notification item. It allows you to handle interactions that occur specifically when the user swipes right on a toast component.CustomEvent

This event is triggered when a user performs a swipe-right gesture on a toast notification item. It allows you to handle interactions that occur specifically when the user swipes right on a toast component.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwiperight

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swiperight event.

Examples

Listen for swiperight using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-toast')?.addEventListener('swiperight', (event) => {
	// event handling code goes here.
})

swipetopThis event is triggered when a user performs an upward swipe gesture (swipe top) on a toast notification item.CustomEvent

This event is triggered when a user performs an upward swipe gesture (swipe top) on a toast notification item.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipetop

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the swipetop event.

Examples

Listen for swipetop using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-toast')?.addEventListener('swipetop', (event) => {
	// event handling code goes here.
})

Methods

closeAll(): voidCloses all currently displayed toast notifications, ensuring that any active toast messages are dismissed from the user interface.

Closes all currently displayed toast notifications, ensuring that any active toast messages are dismissed from the user interface.

On the custom element in the DOM (narrow the selector, e.g. to #my-toast, if you host multiple widgets):

document.querySelector('smart-toast')?.closeAll();

Try a demo showcasing the closeAll method.

closeItem( item: HTMLElement | string): voidCloses a specific toast notification. This action targets and dismisses the designated toast message from the user interface, ensuring that only the selected toast item is removed without affecting others.

Closes a specific toast notification. This action targets and dismisses the designated toast message from the user interface, ensuring that only the selected toast item is removed without affecting others.

Arguments

itemHTMLElement | string

The toast item (or its id) to remove.

On the custom element in the DOM (narrow the selector, e.g. to #my-toast, if you host multiple widgets):

document.querySelector('smart-toast')?.closeItem("item5");

closeLast(): voidCloses the most recently displayed toast notification, removing it from the user's view.

Closes the most recently displayed toast notification, removing it from the user's view.

On the custom element in the DOM (narrow the selector, e.g. to #my-toast, if you host multiple widgets):

document.querySelector('smart-toast')?.closeLast();

Try a demo showcasing the closeLast method.

open( value?: HTMLElement | string, iconType?: string): HTMLElementDisplays a new toast notification and returns the corresponding smart-toast-item instance representing the newly created toast. This allows further manipulation or customization of the toast after it appears.

Displays a new toast notification and returns the corresponding smart-toast-item instance representing the newly created toast. This allows further manipulation or customization of the toast after it appears.

Arguments

value?HTMLElement | string

The value for the toast item. If not set, the value property will be used.

iconType?string

The icon name for the toast item. If not set, the type property determines the icon type that will be used.

ReturnsHTMLElement

On the custom element in the DOM (narrow the selector, e.g. to #my-toast, if you host multiple widgets):

const result = document.querySelector('smart-toast')?.open();

Try a demo showcasing the open method.

CSS Variables

--smart-toast-item-iconvar()

Default value

"''"

Code of toast item icon

--smart-toast-container-default-widthvar()

Default value

"var(--smart-bar-width)"

Default width of the smartToast's containers, positioned top-left, top-right, bottom-left, bottom-right

--smart-toast-header-heightvar()

Default value

"20px"

smartToast header height

--smart-toast-info-backgroundvar()

Default value

"#5bc0de"

Background color for type info

--smart-toast-info-colorvar()

Default value

"#fff"

Text color for type info

--smart-toast-warning-backgroundvar()

Default value

"#f0ad4e"

Background color for type warning

--smart-toast-warning-colorvar()

Default value

"#fff"

Text color for type warning

--smart-toast-error-backgroundvar()

Default value

"var(--smart-error)"

Background color for type error

--smart-toast-error-colorvar()

Default value

"var(--smart-error-color)"

Text color for type error

--smart-toast-success-backgroundvar()

Default value

"var(--smart-success)"

Background color for type success

--smart-toast-success-colorvar()

Default value

"var(--smart-success-color)"

Text color for type success