Toast
v1.0.0-rc.6
@ui5/webcomponents
<ui5-toast>

Basic Toast

Basic Toast Basic Toast
<!--Basic Toast-->
<ui5-button id="wcBtnShowToastBasic" class="samples-margin">Basic Toast</ui5-button>
<ui5-toast id="wcToastBasic">Basic Toast</ui5-toast>

<script>

	// Attaching click listener to the Button which shows the Basic Toast
	wcBtnShowToastBasic.addEventListener('click', function () {
		wcToastBasic.show();
	});

</script>
	

Toast Duration

Short Toast Short Toast Long Toast Long Toast
<!--Short Toast-->
<ui5-button id="wcBtnShowToastShort" class="samples-margin">Short Toast</ui5-button>
<ui5-toast id="wcToastShort" duration=1500 placement="BottomStart">Short Toast</ui5-toast>

<!--Long Toast-->
<ui5-button id="wcBtnShowToastLong" class="samples-margin">Long Toast</ui5-button>
<ui5-toast id="wcToastLong" duration=4500 placement="BottomEnd">Long Toast</ui5-toast>

<script>

	// Attaching click listener to the Button which shows the Short Toast
	wcBtnShowToastShort.addEventListener('click', function () {
		wcToastShort.show();
	});

	// Attaching click listener to the Button which shows the Long Toast
	wcBtnShowToastLong.addEventListener('click', function () {
		wcToastLong.show();
	});

</script>
	

Toast Placements

TopStart TopStart TopCenter TopCenter TopEnd TopEnd MiddleStart MiddleStart MiddleCenter MiddleCenter MiddleEnd MiddleEnd BottomStart BottomStart BottomCenter BottomCenter BottomEnd BottomEnd
<!--TopStart-->
<ui5-button id="wcBtnShowToastTS">TopStart</ui5-button>
<ui5-toast id="wcToastTS" placement="TopStart">TopStart</ui5-toast>

<!--TopCenter-->
<ui5-button id="wcBtnShowToastTC">TopCenter</ui5-button>
<ui5-toast id="wcToastTC" placement="TopCenter">TopCenter</ui5-toast>

<!--TopEnd-->
<ui5-button id="wcBtnShowToastTE">TopEnd</ui5-button>
<ui5-toast id="wcToastTE" placement="TopEnd">TopEnd</ui5-toast>

<!--MiddleStart-->
<ui5-button id="wcBtnShowToastMS">MiddleStart</ui5-button>
<ui5-toast id="wcToastMS" placement="MiddleStart">MiddleStart</ui5-toast>

<!--MiddleCenter-->
<ui5-button id="wcBtnShowToastMC">MiddleCenter</ui5-button>
<ui5-toast id="wcToastMC" placement="MiddleCenter">MiddleCenter</ui5-toast>

<!--MiddleEnd-->
<ui5-button id="wcBtnShowToastME">MiddleEnd</ui5-button>
<ui5-toast id="wcToastME" placement="MiddleEnd">MiddleEnd</ui5-toast>

<!--BottomStart-->
<ui5-button id="wcBtnShowToastBS">BottomStart</ui5-button>
<ui5-toast id="wcToastBS" placement="BottomStart">BottomStart</ui5-toast>

<!--BottomCenter-->
<ui5-button id="wcBtnShowToastBC">BottomCenter</ui5-button>
<ui5-toast id="wcToastBC">BottomCenter</ui5-toast>

<!--BottomEnd-->
<ui5-button id="wcBtnShowToastBE">BottomEnd</ui5-button>
<ui5-toast id="wcToastBE" placement="BottomEnd">BottomEnd</ui5-toast>

<script>

	// Attaching click listeners to the buttons which show the toasts
	Array.from(document.querySelectorAll("ui5-button")).forEach(button => {
		button.addEventListener('click', function () {
			document.querySelector("#" + button.id.replace("BtnShow", "")).show();
		});
	});

</script>
	

Overview

The ui5-toast is a small, non-disruptive popup for success or information messages that disappears automatically after a few seconds.

Usage

When to use:

  • You want to display a short success or information message.
  • You do not want to interrupt users while they are performing an action.
  • You want to confirm a successful action.

When not to use:

  • You want to display error or warning message.
  • You want to interrupt users while they are performing an action.
  • You want to make sure that users read the message before they leave the page.
  • You want users to be able to copy some part of the message text.

ES6 Module Import

import "@ui5/webcomponents/dist/Toast";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
duration
Integer
3000
Defines the duration in milliseconds for which ui5-toast remains on the screen before it's automatically closed.

Note: The minimum supported value is 500 ms and even if a lower value is set, the duration would remain 500 ms.
placement
ToastPlacement
"BottomCenter"
Defines the placement of the ui5-toast web component.

Available options are:
  • TopStart
  • TopCenter
  • TopEnd
  • MiddleStart
  • MiddleCenter
  • MiddleEnd
  • BottomStart
  • BottomCenter
  • BottomEnd

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the text of the ui5-toast web component.

Note: –źlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
show
Shows the ui5-toast.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel