The message box displays a dialog with a simple message to the user. Contrary to the **Popover**, message box can relay messages unrelated to the UI, such as technical errors. This component inherits the look and behavior of the **Dialog** (excluding dragging/resizing). Note: Include two action buttons in the message box when the user's decision is required before continuing. The primary action button should always explicitly display the action they're performing (in text), while the secondary buttons provides them with an option to cancel.

**Use the message box if:** - You want to display non-field-related messages. - You want to interrupt the user while he or she performs an action. - You want to display error, warning, success, confirmation, or information messages. - You need to interrupt the user for some other reason. - You need the user to acknowledge the message. - You need the user to make a decision. **Do not use the message box if:** - You want to display a short success message. Instead, use **Message Toast**. - You can show the message directly in a form field. **Message box follows the structure of a dialog, consisting of following elements:** - \ **Use the message box if:** - You want to display non-field-related messages. - You want to interrupt the user while he or she performs an action. - You want to display error, warning, success, confirmation, or information messages. - You need to interrupt the user for some other reason. - You need the user to acknowledge the message. - You need the user to make a decision. - You want to display a short success message. Instead, use **Message Toast**. - You can show the message directly in a form field. **Message box follows the structure of a dialog, consisting of following elements:** - \

The default message box displays a small dialog with a title, message text and action buttons. Use the default if the message does not fit with one of the semantic types.

The message box can be displayed with various semantic colors and icons, indicating the type of message being relayed. |Semantic type | Modifier class | Description :------------------ | :------------------- | :--------------- Confirmation | \

The message box has 1rem padding all around the body, and the header and footer both inherit their padding from the **Bar** component. Responsive horizontal padding can be applied to the header, body and footer of the message box; however, the amount depends on the screen width. **To display responsive padding, add the following modifier classes to the content container:** |Modifier class | rem | Screen width ------------------ | ---- | --------------------- \