UI Elements - SAP Web Components NEW Message Strip

Updated: February 8, 2024
Latest SAPUI5 Version 1.120

Message Strip

ui5-message-strip | v1.0

Intro

The message strip component allows you to embed application-related messages on the UI. It draws the user’s attention to information that is important in the context of the page content. This could be a warning or a change of state that might otherwise be easy to miss.

Message strip – live example

When to Use

Do

Use the message strip:

  • To provide information related to the object as a whole in the object header, such as the object status.
  • To provide information within the detail area of an object.
  • To inform the user about a status of an object.
  • To warn the user about an issue.
Don't

Don’t use the message strip:

  • To display information within a component.
  • In the list of a list-detail layout.
  • Above the page header.

Anatomy

  1. Container: Holds the icon, message text, and Close button.
  2. Icon (optional): Visual indication of the message type. By default, the message strip uses standard icons for error, warning, success, and information messages.
    We strongly recommend displaying an icon. If you decide to remove it, include an additional text to indicate the message type.
  3. Text: Message text. To preserve the intended design, we strongly recommend using only text for the message itself.
  4. Close button (optional): Allows the user to remove the message strip from the UI.
Anatomy of a message strip
Anatomy of a message strip

Variants

You can use the message strip with or without an icon or Close button. If necessary, you can also configure a custom message strip.

With Icon and Close Button

Message strip with icon and ‘Close’ button

With Icon, Without Close Button

Message strip with icon, without ‘Close’ button

Without Icon, With Close Button

Message strip without icon, with ‘Close’ button

Without Icon or Close Button

Message strip without an icon or ‘Close’ button

Custom MessageStrip

If the application needs a custom message strip, other than the standard semantic variations, use the colors defined for the inverted object status tag. You can use both sets of indication colors.

See all the available icons in the Icon Explorer (Horizon).

Custom message strip

Behavior and Interaction

Clicking or tapping the Close button removes the message strip from the UI.

Message strip – live example

Responsive Behavior

The message strip is fully responsive. Message type icons always display on the left, while the Close icon always displays on the right. Text that exceeds the available width wraps to the next line.

If you place the message within the detail area for an object, it always uses 100% of the available width and reacts to the responsiveness of the container.

Message strip examples with wrapped text

Content Density

The compact message strip is used for both cozy and compact form factors.

Globalization and Localization

For right-to-left languages, such as Arabic or Hebrew, the message strip is mirrored.

Message strip for left-to-right languages
Message strip for right-to-left languages

Related Links

Components

Implementation