Message
Usage
When to Use
Use a message to show information or if an action is required. Messages are often used to give tips or for an onboarding experience within applications (Userguiding: Onboarding UX).
If an action was triggered with a click by the user, use a dialog instead.
If you want to give users contextual help when they hover over a specific component, use a tooltip instead.
Composition
Messages can consist of multiple elements. Note that none of these elements are mandatory.
Title
The title should be concise and summarize the message. Use title capitalization. Don’t end titles with periods, except if you use multiple sentences for your title (Learn more in the Language and Grammar Guidelines).
Icon
Each message can be supplemented with an icon to the left of the title. Icons can help to additionally classify or clarify your message.
Description
The description gives more detailed information about the message. However, it should not restate the title. Refer to the Language and Grammar guidelines for more information on how to write descriptions.
Actions
Messages can include some action, usually in the form of buttons. These actions are displayed in a button row at the bottom of the message.
Examples
Since none of the components of the message are mandatory, messages can be structured very differently. To give a feeling how this can look like, some examples are displayed below.
Placement
Messages that are general and don’t refer to a specific component are located at the bottom right of the screen.
If the message is related to a specific component, it is located next to that component. Component-specific messages can be placed to the left, top, right, or bottom of the component. They include a small pointer in the direction of the related component.
Layout
General messages
Component-specific messages
