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

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.

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

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

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

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

Custom message strip

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

Closing Message strip

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 with wrapped text

Message strip for left-to-right languages

Message strip for right-to-left languages