Messages

Messages are used to provide collective feedback an action or a state.

Messages are used to provide collective feedback to the users about an action or a state. They have a significant visual loudness to draw users’ 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.

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.

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. They appear with the rest of the components and cannot be dismissed directly.

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.

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.

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