MessageStrip
v0.9.0
@ui5/webcomponents
<ui5-message-strip>

MessageStrip

Information MessageStrip Positive MessageStrip Negative MessageStrip Warning MessageStrip
<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>
	

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

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

Custom MessageStrip

You have new message. Successfull login! Access denied! Update is required. Custom icon Custom animated gif
<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>
	

Overview

The ui5-message-strip component enables the embedding of app-related messages. It displays 4 designs 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-message-strip 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
design
MessageStripDesign
"Information"
Defines the component type.

Note: Available options are "Information", "Positive", "Negative", and "Warning".
since v1.0.0-rc.15
hideCloseButton
hide-close-button
boolean
false
Defines whether the MessageStrip renders close button.
hideIcon
hide-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.
since v1.0.0-rc.15

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

Note: Although 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 component.

Note: If no icon is given, the default icon for the component 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 Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel