MsgBox

import { MsgBox } from 'cx/widgets';

The MsgBox class provides utility methods for displaying alert and confirmation dialogs. Both methods return Promises, making it easy to handle user responses with async/await.

Alert

Use MsgBox.alert() to display informational messages. The method accepts either a simple string or a configuration object.

 <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
  <Button
    onClick={() => {
      MsgBox.alert("This is a simple alert message.")
    }}
  >
    Simple Alert
  </Button>
  <Button
    onClick={() => {
      MsgBox.alert({
        title: "Information",
        message: "This alert has a custom title.",
      })
    }}
  >
    Alert with Title
  </Button>
  <Button
    onClick={() => {
      MsgBox.alert({
        title: "Custom Button",
        message: "Click the button below to close.",
        okText: "Got it!",
      })
    }}
  >
    Custom OK Text
  </Button>
</div> 

Yes/No Confirmation

Use MsgBox.yesNo() to ask the user for confirmation. The returned Promise resolves to "yes" or "no" based on the user’s choice.

 <div
  style={{
    display: "flex",
    flexWrap: "wrap",
    gap: "8px",
    alignItems: "center",
  }}
>
  <Button
    onClick={async (e, { store }) => {
      const result = await MsgBox.yesNo("Do you want to proceed?")
      store.set(m.result, result)
    }}
  >
    Simple Yes/No
  </Button>
  <Button
    onClick={async (e, { store }) => {
      const result = await MsgBox.yesNo({
        title: "Confirm Action",
        message: "Are you sure you want to delete this item?",
        yesText: "Delete",
        noText: "Cancel",
        yesButtonMod: "primary",
      })
      store.set(m.result, result)
    }}
  >
    Custom Buttons
  </Button>
  <span
    text={{ expr: `{${m.result}} ? "Last result: " + {${m.result}} : ""` }}
  />
</div> 
 interface PageModel {
  result: string;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Button, MsgBox } from "cx/widgets"; 

Rich Content

For messages with formatted content, links, or images, use the children property instead of message.

 <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
  <Button
    onClick={() => {
      MsgBox.alert({
        title: "Terms of Service",
        children: (
          <div>
            <p>Please read the following carefully:</p>
            <ul style={{ marginLeft: "20px", marginTop: "8px" }}>
              <li>You must be 18 or older</li>
              <li>You agree to our privacy policy</li>
              <li>You accept the terms of use</li>
            </ul>
            <p style={{ marginTop: "12px", fontStyle: "italic" }}>
              By clicking OK, you accept these terms.
            </p>
          </div>
        ),
        okText: "I Accept",
      })
    }}
  >
    Rich Content Alert
  </Button>
  <Button
    onClick={() => {
      MsgBox.yesNo({
        title: "Delete Confirmation",
        children: (
          <div>
            <p>
              <strong>Warning:</strong> This action cannot be undone.
            </p>
            <p style={{ marginTop: "8px" }}>
              Are you sure you want to permanently delete this file?
            </p>
          </div>
        ),
        yesText: "Yes, Delete",
        noText: "Keep File",
      })
    }}
  >
    Rich Content Confirm
  </Button>
</div> 

Methods

Method	Description
`MsgBox.alert(options)`	Displays an alert dialog. Returns a `Promise<void>` that resolves when the user clicks OK.
`MsgBox.yesNo(options)`	Displays a confirmation dialog. Returns a `Promise<string>` that resolves to `"yes"` or `"no"`.

Options

Both methods accept either a message string or a configuration object with these properties:

Property	Type	Description
`message`	`string`	Text message to display.
`title`	`string`	Dialog window title.
`header`	`object`	Custom Cx component for the window header.
`children`	`any`	Rich content (Cx components) to display instead of a plain message.
`items`	`any`	Alias for `children`.
`style`	`string`	CSS style for the dialog window.
`store`	`Store`	Store instance to use for the dialog.
`okText`	`string`	Custom text for the OK button. Default: `"OK"`.
`yesText`	`string`	Custom text for the Yes button. Default: `"Yes"`.
`noText`	`string`	Custom text for the No button. Default: `"No"`.
`yesButtonMod`	`string`	Visual modifier for the Yes button.
`noButtonMod`	`string`	Visual modifier for the No button.
`callback`	`function`	Optional callback invoked before closing. Return `false` to prevent closing.