MessageContainer

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

OverviewPropertiesUsage

Import

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

Demo

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.

Show prefix icon

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

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.

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.