<!--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>
	

<!--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>
	

<!--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>