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

    Import​

    import { MessageContainer } from '@dynatrace/strato-components-preview/content';

    Use cases​

    CodeSandbox

    Use different variants​

    Use the variant prop to change the color theme of the MessageContainer. Each variant value has a matching default icon, which is based on the status and health design concept, so changing the variant also changes the provided default prefix icon.

    CodeSandbox

    Show a prefix icon​

    Use <MessageContainer.Prefix /> to render an icon. You can supply the icon as child to render a custom prefix icon.

    CodeSandbox

    Add actions​

    Certain info messages might prompt your user to perform an action or navigate to a different location. You can pass Buttons, Links, or other content as children to MessageContainer.Actions.

    CodeSandbox

    Make MessageContainer dismissible​

    Pass a callback function to the onDismiss prop of MessageContainer to display a close button that calls the provided callback when clicked. You can combine that with your own state to determine when to show the message.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community