Intro

This guideline now covers both SAPUI5 and SAP Web Components. Learn more.

Information

Icon

false

Intro

The message strip component displays application-related messages directly within the interface. It draws attention to important information, such as warnings or status changes, that might otherwise go unnoticed. The message strip component can be embedded within the header or detail area of an object or page, or it might apply only to a single component (for example, a table).

A message strip example showing a sample notice "System maintenance is scheduled at midnight.” with a Learn more link at the end and a close X button on the far right.

Message strip

Component availability

This component is available in the following libraries:

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.MessageStrip">sap.m.MessageStrip</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fsap.github.io%2Fui5-webcomponents%2Fcomponents%2FMessageStrip%2F">ui5-message-strip</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fdesign%2FSILcWzK5uFghKun9jx6D7c%2FSAP-Web-UI-Kit%3Fnode-id%3D880-2602">Message Strip</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.MessageStrip">sap.m.MessageStrip</a></div> <div data-valign="middle">:badge, info, large, _, SAPUI5:</div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fsap.github.io%2Fui5-webcomponents%2Fcomponents%2FMessageStrip%2F">ui5-message-strip</a></div> <div data-valign="middle">:badge, info, large, _, SAP Web Components:</div> </div> <div> <div data-valign="middle">SAP Fiori for Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1494295794601744471">Message Strip</a></div> <div data-valign="middle">:badge, info, large, _, Figma:</div> </div>

When to Use

false

Use the message strip to:

Display messages that apply to either the entire page or a specific section, such as an object header.
Inform users about the status of an object, such as a process, item, or workflow.
Display a warning message to alert users to an issue.

dont

false

Don’t use the message strip to:

Display information within another component (for example, a table cell or list item), or to apply the component to another small element.
Request decisions or immediate user actions. Use a dialog instead.
Communicate issues related to a specific input or form element. Use the component’s value state instead.

Place message strips close to relevant content to avoid interrupting the user flow.
Use value states consistently so users can understand the urgency and nature of each message.
Show an icon to identify the message type.
Include a Close button when the message is persistent or requires user dismissal.
Keep text simple and concise, use formatting only when you need to emphasize or add hyperlink text.
Add a custom icon when you need to communicate specific meaning not covered by standard value states.
Apply a custom background color when you need to highlight special message types or match application branding.
Ensure the message strip adapts responsively, keeping the icon on the left, the Close button on the right, and letting text wrap naturally.

Anatomy

Container: Holds the icon, message text, and Close button.
Icon (optional): Visual indication of the message type. By default, the message strip uses standard icons for negative, critical, positive, and information messages.
Text: Displays the main message content.
Close button (optional): Lets users dismiss the message strip.

Anatomy of a message strip with numbered pointers referencing the component’s container, icon, text, and close button.

Anatomy of a message strip

Types

Message strip with or without icon

A message strip can be displayed with or without an icon, depending on the context and importance of the message. Including an icon helps users quickly recognize the message type.

Two examples of a message strip: with an icon (A) on yellow background and without an icon (B) on blue background.

Message strip with and without icon

Message strip with or without “Close” button

A message strip can appear with or without a Close button. Use the Close button for temporary or informational messages that users can remove, and omit for persistent messages that convey ongoing status or important system information.

Two examples of a message strip: with an icon on the left and a close button on the right (A) and with an icon on the left, but without a close button (B) on the right.

Message strip with and without “Close” button

Message strip with or without formatted text

A message strip can include plain or formatted text. Keep messages simple and concise in both cases. Use formatting, such as bold text or inline links only to emphasize key details, not to add complexity.
Below is an additional example to the formatted text to illustrate that links can be added to the message text.

Two examples of a message strip: message strip with some formatted text in bold letters (A) and without any formatted text (B).

Message strip with and without formatted text

Message strip with custom icon

A message strip can include a custom icon to represent a specific status or industry-related context not covered by the standard value states. You can use a custom icon when you need to convey a unique meaning or align the message with application-specific semantics.

Message strip with a sample notice "System maintenance is scheduled at midnight.” with a custom icon on the left showing a gear.

Message strip with custom icon

Message strip with custom background

Use a custom background color when you need to distinguish special message types or align with app-specific branding. For additional options, see the [internal_only]indication colors[/internal_only] [external_only]indication colors[/external_only] palette.

Message strip with a custom background color (dark red in this case) and white text and icon.

Message strip with custom background color

States

Value states

The message strip supports four value states: Negative, Critical, Positive, and Information. Value states appear with a specific color and icon to convey their meaning. Unlike other components, message strips always have a value state.

A. Negative: Indicates that an error has occurred, possibly guiding users to take corrective action.

B. Critical: Alerts users to potential issues that may require attention but are not errors. Users can typically continue but might run into issues later.

C. Positive: Confirms that a user action or system process has been successfully completed.

D. Information: Displays general information or guidance that is not critical but can help users complete their tasks.

Message strip value states: negative (red) with an “X” icon, critical (orange) with an “exclamation mark” icon, positive (green) with a “check mark” icon and information (blue) with an “i” icon.

Message strip value states

guideline

Use message strips sparingly and place them near the related content, so they inform without interrupting the user flow. Consistent use of these semantic states ensures that users can quickly recognize and interpret the nature and urgency of a message across the interface.

For more information, see Value States.

Focus state

All value states can have a focus. A focus state indicates that the component receives the keyboard interaction input. If a message strip contains a link, the focus first goes to the link, and then to the Close button.

Message strip focus state with a blue outline around the Learn More link in the first example and a blue border around the “X” close button in the second.

Message strip focus state

For more information, see Focus States.

Behavior and Interaction

The user can dismiss a message strip from the application's UI by clicking the Close button located on the right-hand side. On mobile devices, the tap gesture is used for dismissal instead of mouse interaction.

Responsiveness

The message strip adapts to different layouts and screen sizes. Icons remain on the left and the Close button on the right, while text wraps automatically.

If you place the message strip 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 spanning the entire width of a desktop application and resized to adapt to the width of a mobile device.

Message strip – web and mobile appearance

Accessibility

SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.

The following keyboard combinations are supported by the SAPUI5 message strip component.

<div> <div>Key Combination</div> <div>What It Does</div> </div> <div> <div><strong>Tab</strong></div> <div> <p>If the message strip has a <em>Close</em> button, the focus moves to it. Pressing <strong>Tab</strong> again moves the focus to the next interactive element outside the message strip.</p> <p>If the message strip contains a link, the focus moves to it.</p> <p>If there is no <em>Close</em> button, pressing <strong>Tab</strong> again moves the focus to the next interactive element outside the message strip.</p> <p>If multiple links exist, pressing <strong>Tab</strong> moves the focus sequentially through the links, after which it moves to the <em>Close</em> button, if present.</p> </div> </div> <div> <div><strong>Shift + Tab</strong></div> <div> <p>If the focus is on the <em>Close</em> button, pressing <strong>Shift + Tab</strong> moves the focus to the previous interactive element.</p> <p>If the message strip contains a link and the focus is on the <em>Close</em> button, the focus moves to the link.</p> <p>If the focus is on the second link, pressing <strong>Shift + Tab</strong> moves the focus to the first link.</p> </div> </div>

For details on screen reader support and Accessible Rich Internet Applications (ARIA), see UI5 Screen Reader Support and WAI-ARIA Authoring.

Content

Text

Messages should be simple and concise. Keep the following principles in mind when formulating message texts. For more information, see UI Text Guidelines for SAP Fiori Apps – Messages.

Link

All link types (regular, emphasized, subtle, and so on) can be used in the message strip component. Choose the link variant that best fits your use case. However, for a custom message strip using the extended palette, the subtle link is the recommended type. For more information, see Link.

Localization

The message strip supports both left-to-right (LTR) and right-to-left (RTL) languages layout helping users to read and interact naturally. In RTL layouts, the positions of the leading icon and the trailing Close button are flipped to match the reading direction (icon on the right, Close on the left).

Message strip in left-to-right (LTR) layout with left aligned text, an “i” icon on the left and a close “X” button on the right.