MessageStrip

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.

Keyboard Handling

Fast Navigation

This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up]. In order to use this functionality, you need to import the following module: import "@ui5/webcomponents-base/dist/features/F6Navigation.js"

ES6 Module Import

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

Basic Sample

Properties

design

Description	Defines the component type.
Type	"Information" | "Positive" | "Negative" | "Warning"
Default	"Information"
Since	1.0.0-rc.15

hideIcon

Description	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	boolean
Default	false
Since	1.0.0-rc.15

hideCloseButton

Description	Defines whether the MessageStrip renders close button.
Type	boolean
Default	false

Slots

default

Description	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.
Type	Array<Node>

icon

Description	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.
Type	Array<IIcon>

Events

close

Description	Fired when the close button is pressed either with a click/tap or by using the Enter or Space key.
Type	CustomEvent

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples

Design

Hide Icon and Close Button

Use hideIcon and hideCloseButton properties to hide some parts of the MessageStrip.

Custom Icon