Intro

The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page, or in the header of an object page.

Message strip

When to Use

Use the message strip if:

You want to provide information related to the object as a whole in the object header, such as the object status.
You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Don't

Do not use the message strip if:

You want to display information within a control, in the list of a list-detail layout, or above the page header.

Anatomy

Container: Holds the icon, message text, and Close button.
Close button (optional): Allows the user to remove the message strip from the UI.
Link (optional): Provides the option to add a link to additional information.
Text: Message text.
Icon (optional): Visual indication of the message type. By default, the message strip uses standard icons for error, warning, success, and information messages.

Anatomy of a message strip

guideline

We strongly recommend displaying an icon. If you decide to remove it, include an additional text to indicate the message type.
To preserve the intended design, we strongly recommend using only text for the message itself.

Types

Semantic

The message strip has the following semantic types: Information, Success, Warning, and Error.

Semantic types of the message strip

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

B. Success Message Strip: Confirms that a user action or system process has been successfully completed.

C. Warning Message Strip: Alerts users to potential issues that may require attention but are not errors.

D. Error Message Strip: Indicates that an error has occurred, possibly guiding users to take corrective action.

Icon/Close Button

You can use the message strip with or without an icon or Close button.

Message strip with or without an icon or Close button

A. With Icon and Close Button: Displays an icon to convey message type and includes a Close button for dismissing the message.

B. With Icon Only: Shows an icon for message type but does not include a Close button.

C. Without Icon with Close Button: Does not display an icon but provides a Close button to dismiss the message.

D. Without Icon and Close Button: Displays the message text only, with no icon or Close button.

Custom Message Strip

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

A. Custom Message Strip (Red): Displays a custom message with a red background and icon, without a Close button.

B. Custom Message Strip (Orange): Displays a custom message with an orange background and icon, including a Close button on the right for dismissing the message.

Behavior and Interaction

Static Behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive Behavior

The app team can add a link in case more content is useful for the user to understand a situation.

Clicking the Close button on the right-hand side hides the message strip. The app team can determine whether the message strip comes back on page reload, the next visit, or never.

Interactive behavior with Close function

Accessibility

When an application adds a message strip dynamically, also notify screen reader users.

Use the following structure for the screen reader notification text:

“New information bar of type <Error / Warning / Success / Information>: <text of message>”

To avoid an endless screen reader announcement, send a short message summary with only the most relevant information.

Responsiveness

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.

Message strip with wrapped text

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.