Skip to main content

    MessageContainer

    The MessageContainer allows you to communicate statuses prominently. It's either persistent or dismissible. If needed, provide actions to help users take the following steps or resolve an issue.

    OverviewPropertiesUsage

    When to use​

    Use MessageContainers to communicate important contextual information related to the current section or page. For example, a condition, status, feedback, or changes.

    Variants​

    MessageContainers 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.

    Prefix​

    • Use the prefix, which is usually an icon, to communicate the semantic meaning of the message quickly.
    • Don't use colored MessageContainers 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 will help 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

    Avoid adding a title and a description when the message is short, clear, and easy to understand.

    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 MessageContainers 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 MessageContainers 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