<ui5-message-strip design="Information">Information MessageStrip</ui5-message-strip>
<ui5-message-strip design="Positive">Positive MessageStrip</ui5-message-strip>
<ui5-message-strip design="Negative">Negative MessageStrip</ui5-message-strip>
<ui5-message-strip design="Warning">Warning MessageStrip</ui5-message-strip>
<script>
	document.querySelectorAll("ui5-message-strip").forEach(function(messageStrip) {
		messageStrip.addEventListener("close", function() {
			messageStrip.parentNode.removeChild(messageStrip);
		});
	});
</script>
	

<ui5-message-strip design="Information" hide-close-button>Information MessageStrip With No Close Button</ui5-message-strip>
<ui5-message-strip design="Positive" hide-close-button>Positive MessageStrip With No Close Button</ui5-message-strip>
<ui5-message-strip design="Negative" hide-close-button>Negative MessageStrip With No Close Button</ui5-message-strip>
<ui5-message-strip design="Warning" hide-close-button>Warning MessageStrip With No Close Button</ui5-message-strip>
	

<ui5-message-strip design="Information" hide-icon>Information MessageStrip With No Icon</ui5-message-strip>
<ui5-message-strip design="Positive" hide-icon>Positive MessageStrip With No Icon</ui5-message-strip>
<ui5-message-strip design="Negative" hide-icon>Negative MessageStrip With No Icon</ui5-message-strip>
<ui5-message-strip design="Warning" hide-icon>Warning MessageStrip With No Icon</ui5-message-strip>
<script>
	document.querySelectorAll("ui5-message-strip").forEach(function(messageStrip) {
		messageStrip.addEventListener("close", function() {
			messageStrip.parentNode.removeChild(messageStrip);
		});
	});
</script>
	

		<div class="wrapper">
			<ui5-button id="button1">Generate MessageStrip</ui5-button>
		</div>
		<script>
			const container = document.querySelector(".wrapper");
			const button =  document.querySelector("#button1");
			button.addEventListener("click", function(event) {
				let invisibleMessage =  window["sap-ui-webcomponents-bundle"].invisibleMessage;
				const messageStrip = document.querySelector("#msgStrip");
				const types = ["Information", "Warning", "Negative", "Positive"];
				const text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco.";
				let type = types[Math.round(Math.random() * 3)];
		
				if (messageStrip) {
					container.removeChild(messageStrip);
				}
		
				let generatedMsgStrip = document.createElement("ui5-message-strip");
				generatedMsgStrip.id = "msgStrip";
				generatedMsgStrip.design = type;
				generatedMsgStrip.textContent = text;

				invisibleMessage.announce(`New Information Bar of type ${type} ${text}`, "Assertive");
		
				container.appendChild(generatedMsgStrip);
			});
		</script>
	

<ui5-message-strip design="Information" style="width: 200px;" hide-icon hide-close-button>You have new message.</ui5-message-strip>
<ui5-message-strip design="Positive" style="width: 200px;" hide-close-button>Successfull login!</ui5-message-strip>
<ui5-message-strip design="Negative" style="width: 200px;" hide-icon>Access denied!</ui5-message-strip>
<ui5-message-strip design="Warning" style="width: 200px;">Update is required.</ui5-message-strip>
<ui5-message-strip design="Warning" style="width: 200px;"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-message-strip>
<ui5-message-strip design="Positive" style="width: 200px;"><img src="../../../assets/images/loading.gif" width="16" height="16" slot="icon">Custom animated gif</ui5-message-strip>
<script>
	document.querySelectorAll("ui5-message-strip").forEach(function(messageStrip) {
		messageStrip.addEventListener("close", function() {
			messageStrip.parentNode.removeChild(messageStrip);
		});
	});
</script>