When to Use

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 use the message strip:

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

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

Behavior and Interaction

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

Globalization and Localization

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

Related Links