Messages

Messages are used to display important information and provide relevant actions for users to address. The information can be specific to a page, section or field.

Messages serve as a prominent means of communicating important information to users, designed with a noticeable visual emphasis to capture their attention.

This is the default variant when it comes to messages. It has a significant visual loudness and should be used with caution.

It is the less attention-grabbing counterpart and hence can be used in between components or patterns.

Standard message comes with a few variants -

A title can be shown at the top of the messages. It is typically used to summarize the description in case it’s long.

Actions can be a part of messages and are typically used to directly or indirectly dismiss them.

Inline messages come in 2 sizes - small and regular .

Messages come in 4 appearances basis on the intent -

The info appearance is used when the message needs to provide information that requires some attention from the users.

The warning appearance is used when the message needs to notify a warning that might need users’ attention.

The alert appearance is used when the message needs to provide an error or failure information that requires immediate attention. In the event of an error, the message persists until the issue is resolved, ensuring that the user remains informed until the matter is addressed.

The success variant is used when the inline message needs to notify the successful completion of a task or action.

Messages are non-dismissive in nature due to the prominent feedback they are delivering. They appear with the rest of the components and cannot be dismissed directly.

Messages are used for important information and are integrated directly into the content of the interface whereas toasts are temporary notifications that appear on the screen to provide brief, unobtrusive feedback to the user.

Messages vs Toasts

Inline message variant should be used when feedback relative to some specific content has to be provided to the users. Whereas, the standard message variant should be used when collective feedback for a section or an entire page has to be provided to the users.

[Left] Inline message, [Right] Standard message

Message component always appears at the top of a section but just below the header. The width of the message component always spans the width of its container or as per the content appearing below it.

Position & width of the standard message component

Inline message component appears below the component it is related to, with a 4px margin at top and spans the width of the component.

Position & width of the inline message component