Intro

You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.

Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.

Message view

Usage

Use the message view if:

You want to display multiple messages triggered by an action within a disruptive dialog.

Do not use the message view if:

You want to display messages for form field validation. Instead, use the message popover.
You want to display a single message that interrupts the user. Instead, use the message box.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the dialog container in which it is embedded.

Layout

Filtering

Multiple Message Types – Filtering by Message Severity

If different types of messages are available, users can filter messages by type (error, warning, success, and information) using the segmented buttons at the top of the message view.

Messages of different types can be filtered using the segmented buttons.

One Message Type Only – Filtering Hidden

The filter bar is hidden if there is only one type of message (for example, only errors).

The filter bar is hidden if all messages are of the same type.

List

Message view list items

The message view list includes the following:

Short Description: a simple and helpful short message text of up to 140 characters.
Subtitle: You can use the subtitle to give your message a description that helps users to identify the object they are looking for. It has a limit of 140 characters.
Navigation to Message Details: If message details are provided, the message view automatically provides a chevron on the right-hand side for navigating to the message details. If the view contains only one message that also has message details, the message details page is displayed by default.
Aggregating Messages: You can aggregate messages by filling out the counter property of each list item. The message view only provides the counter property. The aggregation itself must be implemented by the app team.