# MsgBox

```ts
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.

```tsx
import { Button, MsgBox } from "cx/widgets";

export default (
  <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
    <Button
      onClick={() => {
        MsgBox.alert("This is a simple alert message.");
      }}
    >
      Simple Alert
    </Button>
    <Button
      onClick={(e) => {
        MsgBox.alert({
          title: "Information",
          message: "This alert has a custom title.",
          initiatingEvent: e,
        });
      }}
    >
      Alert with Title
    </Button>
    <Button
      onClick={(e) => {
        MsgBox.alert({
          title: "Custom Button",
          message: "Click the button below to close.",
          okText: "Got it!",
          initiatingEvent: e,
        });
      }}
    >
      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.

```tsx
import { createModel } from "cx/data";
import { Button, MsgBox } from "cx/widgets";

interface PageModel {
  result: string;
}

const m = createModel<PageModel>();

export default (
  <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",
          noButtonMod: "secondary",
          initiatingEvent: e,
        });
        store.set(m.result, result);
      }}
    >
      Custom Buttons
    </Button>
    <span
      text={{ expr: `{${m.result}} ? "Last result: " + {${m.result}} : ""` }}
    />
  </div>
);

```

## Rich Content

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

```tsx
import { Button, MsgBox } from "cx/widgets";

export default (
  <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. |