MessageStrip
v0.9.0
@ui5/webcomponents
<ui5-messagestrip>

MessageStrip

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

MessageStrip With No Close Button

Information MessageStrip With No Close Button Positive MessageStrip With No Close Button Negative MessageStrip With No Close Button Warning MessageStrip With No Close Button
<ui5-messagestrip type="Information" no-close-button>Information MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip type="Positive" no-close-button>Positive MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip type="Negative" no-close-button>Negative MessageStrip With No Close Button</ui5-messagestrip>
<ui5-messagestrip type="Warning" no-close-button>Warning MessageStrip With No Close Button</ui5-messagestrip>
	

MessageStrip With No Icon

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

Custom MessageStrip

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

Overview

The ui5-messagestrip component enables the embedding of app-related messages. It displays 4 types of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. Each message can have a Close button, so that it can be removed from the UI, if needed.

Usage

For the ui5-messagestrip component, you can define whether it displays an icon in the beginning and a close button. Moreover, its size and background can be controlled with CSS.

ES6 Module Import

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

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
noCloseButton
no-close-button
boolean
false
Defines whether the MessageStrip renders close icon.
noIcon
no-icon
boolean
false
Defines whether the MessageStrip will show an icon in the beginning. You can directly provide an icon with the icon slot. Otherwise, the default icon for the type will be used.
type
MessageStripType
"Information"
Defines the ui5-messagestrip type.

Note: Available options are "Information", "Positive", "Negative", and "Warning".

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-messagestrip.

Note: –źlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
icon
HTMLElement
Defines the content to be displayed as graphical element within the ui5-messagestrip.

Note: If no icon is given, the default icon for the ui5-messagestrip type will be used. The SAP-icons font provides numerous options.

See all the available icons in the Icon Explorer.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
close
Fired when the close button is pressed either with a click/tap or by using the Enter or Space key.
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