> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 71191fe3-9e6f-4a4e-a414-8f0beb679d4f
---

# no-browser-dialogs

> Prevent usage of native browser dialog APIs (alert, confirm, and prompt) in UI extensions.

The `no-browser-dialogs` rule prevents usage of the following native browser dialog APIs: [alert()](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert), [confirm()](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm), and [prompt()](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt).

## Rule details

UI extensions run in a sandboxed web worker environment where native browser dialog APIs (`alert()`, `confirm()`, and `prompt()`) are intentionally replaced with error-throwing functions for security reasons.

These blocking dialogs would freeze the entire UI and negatively impact user experience. Instead, UI extensions provide non-blocking alternatives that integrate seamlessly with the HubSpot interface.

## Dialog method alternatives

Use the following UI extension alternatives instead of browser dialog APIs:

| Native API                    | Alternative                                                                                                                                                                                                                      | Purpose                     |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
| `alert()` (for pop-ups)       | [`actions.addAlert()`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#display-alert-banners)                                                                                                              | Display toast notifications |
| `alert()` (for inline alerts) | [`<Alert>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert) component                                                                                                               | Display inline alerts       |
| `confirm()`                   | [`<Modal>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal) + [`<Button>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button) components | Get user confirmation       |
| `prompt()`                    | [`<Modal>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal) + [`<Input>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/input) components   | Get user text input         |

See the next section for an example of each alternative.

## Examples

### Global alerts

Instead of using global `alert()`:

```jsx theme={null}
// Incorrect
function showWarning() {
  alert('Please save your work!');
}
...
window.alert('Operation completed');
```

Use [`actions.addAlert()`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#display-alert-banners) from the SDK:

```jsx theme={null}
import { Text } from '@hubspot/ui-extensions';

const Extension = ({ actions }) => {
  const showWarning = () => {
    actions.addAlert({
      type: 'warning',
      message: 'Please save your work!',
    });
  };

  return <Text>Content here</Text>;
};

export default hubspot.extend(({ actions }) => (
  <Extension actions={actions} />
));
```

Or use the [`<Alert>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert) component for inline alerts:

```jsx theme={null}
import { Alert, Text } from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <>
      <Alert title="Warning" variant="warning">
        <Text>Please save your work!</Text>
      </Alert>
    </>
  );
};
```

### Confirmations

Instead of using `confirm()` as shown below:

```jsx theme={null}
// Incorrect
function deleteItem() {
  if (confirm('Are you sure you want to delete this?')) {
    // Delete logic
  }
}

// Also incorrect
const result = globalThis.confirm('Continue?');
```

Use a combination of [`<Modal>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal) and [`<Button>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert) components:

```jsx expandable theme={null}
// Correct

import {
  Button,
  Modal,
  ModalBody,
  ModalFooter,
  Text,
} from '@hubspot/ui-extensions';

const Extension = ({ actions }) => {
  const handleDelete = () => {
    // Perform delete operation
    actions.addAlert({
      type: 'success',
      message: 'Item deleted successfully',
    });
  };

  return (
    <Button
      variant="destructive"
      overlay={
        <Modal
          id="delete-confirmation"
          title="Confirm Deletion"
          width="small"
          variant="danger"
        >
          <ModalBody>
            <Text>Are you sure you want to delete this item?</Text>
          </ModalBody>
          <ModalFooter>
            <Button
              variant="destructive"
              onClick={(_, closeOverlay) => {
                handleDelete();
                closeOverlay();
              }}
            >
              Delete
            </Button>
            <Button
              variant="secondary"
              onClick={(_, closeOverlay) => closeOverlay()}
            >
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      }
    >
      Delete Item
    </Button>
  );
};
```

### Prompts

Instead of using `prompt()`:

```jsx theme={null}
// Incorrect
function getUserInput() {
  const name = prompt('Enter your name:');
  return name;
}

// Also incorrect
const value = self.prompt('Enter a value:', 'default');

```

Use a combination of [`<Modal>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert) and [`<Input>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/input) components:

```jsx theme={null}
import {
  Button,
  Input,
  Modal,
  ModalBody,
  ModalFooter,
  Text,
} from '@hubspot/ui-extensions';
import { useState } from 'react';

const Extension = ({ actions }) => {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    actions.addAlert({
      type: 'success',
      message: `You entered: ${inputValue}`,
    });
  };

  return (
    <Button
      overlay={
        <Modal id="user-input" title="Enter Your Name" width="small">
          <ModalBody>
            <Input
              name="userInput"
              label="Name"
              value={inputValue}
              onChange={(value) => setInputValue(value)}
            />
          </ModalBody>
          <ModalFooter>
            <Button
              variant="primary"
              onClick={(_, closeOverlay) => {
                handleSubmit();
                closeOverlay();
              }}
            >
              Submit
            </Button>
            <Button
              variant="secondary"
              onClick={(_, closeOverlay) => closeOverlay()}
            >
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      }
    >
      Get Input
    </Button>
  );
};
```

## Related resources

* [actions.addAlert()](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#display-alert-banners)
* [Alert Component](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert)
* [Modal Component](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal)