Skip to main content

MessageContainer

Use the MessageContainer to communicate important contextual information related to the current section or page, such as conditions, statuses, feedback, or changes.

OverviewPropertiesUsage

When to use​

  • To communicate important contextual information related to the current section or page about a condition, status, feedback, or change.

When not to use​

  • When the message is transient and should disappear automatically after a brief time. Use a Toast instead.

Variants​

MessageContainer components come in five variants. Each has a different semantic meaning.

Examples of the MessageContainer component with different variant property values Examples of the MessageContainer component with different variant property values

Neutral​

  • Use the neutral variant for information that isn't positive or negative and is non-essential for users to complete their tasks. For example, to provide further context about a feature or section.

Primary​

  • Use the primary variant to highlight information that shouldn't be missed. For example, to inform about the requirements for a particular feature or to promote a new app version.
  • Use the primary variant sparingly, ideally once per page at most.

Success​

  • Use the success variant to confirm that an action or process has been completed successfully. For example, at the end of a multi-step configuration.

Warning​

  • Use the warning variant for potential issues or when a critical status is about to be reached. For example, when a cluster has monitoring issues.

Critical​

  • Use the critical variant for errors, when something went wrong, or for issues that require immediate attention. For example, a failed process that can lead to negative consequences or a validation error summary.

See the best practices in Status and health for more detail.

Prefix​

  • Use the prefix, which is usually an icon, to communicate the semantic meaning of the message quickly.
  • Don't use colored MessageContainer components without a prefix if quick recognition of the semantic meaning is needed.
  • The prefix comes with pre-configured icons for the different MessageContainer variants. If you customize the prefix because a different icon better fits your use case, follow the Status and health guidelines.

Example of a warning MessageContainer with prefix icon as do and without prefix icon as don't Example of a warning MessageContainer with prefix icon as do and without prefix icon as don't

Title​

If the message is long or complex, add a title and a description to the MessageContainer. This helps users quickly understand what the message is about when scanning the page.

Example of a long message with title as do and without title as don't Example of a long message with title as do and without title as don't

When the message is short, clear, and easy to understand, avoid adding a title.

Example of a short message without title as do and with title as don't Example of a short message without title as do and with title as don't

Actions​

  • If possible, include actions that either help users resolve the situation or navigate them to more detailed information.
  • Avoid including more than two actions.

Example of a MessageContainer with helpful actions in the action slot Example of a MessageContainer with helpful actions in the action slot

Dismissible​

  • Use dismissible MessageContainer components if the information doesn't have to be addressed by users to continue their current task. For example, when promoting a new version of an app.
  • Don't use dismissible MessageContainer components if the information they contain is essential and dismissing it would leave users confused or stuck in their task. For example, when informing about a problem that needs to be resolved.
  • Hide the MessageContainer if the situation is resolved or the information becomes irrelevant. Don't wait until users hide it if it's dismissible.
  • Consider storing that users have dismissed a MessageContainer and avoid showing it again.

Example of a dismissible MessageContainer announcing a new app version and a non-dismissible one for a permission error Example of a dismissible MessageContainer announcing a new app version and a non-dismissible one for a permission error

Still have questions?
Find answers in the Dynatrace Community