---

title: MainModal

---

# MainModal

A specialised version of a modal component, made to contain a full search application.

## Props

| Name                              | Description                                                                                                                                                                  | Type                                                | Default                                                               |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | --------------------------------------------------------------------- |
| <code>animation</code>            | Animation to use for opening/closing the modal.                                                                                                                              | <code>AnimationProp</code>                          | <code></code>                                                         |
| <code>closeEvents</code>          | Events to listen for closing the main modal.                                                                                                                                 | <code>XEvent[]</code>                               | <code>() => ['UserClickedCloseX', 'UserClickedOutOfMainModal']</code> |
| <code>focusOnOpen</code>          | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element. | <code>boolean</code>                                | <code>false</code>                                                    |
| <code>openEvents</code>           | Events to listen for opening the main modal.                                                                                                                                 | <code>XEvent[]</code>                               | <code>() => ['UserClickedOpenX', 'UserOpenXProgrammatically']</code>  |
| <code>outOfModalClickEvent</code> | Event to be emitted by the modal when clicked out of its content.                                                                                                            | <code>(String as PropType<XEvent>) \|\| null</code> | <code>'UserClickedOutOfMainModal'</code>                              |

## Slots

| Name                 | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> |             | None                                      |

## Events

This component emits the following events:

- [`UserClickedOutOfMainModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## Examples

A basic example of how the main modal works:

```vue live
<template>
  <OpenMainModal>Open X</OpenMainModal>
  <MainModal>
    <CloseMainModal>Close X</CloseMainModal>
  </MainModal>
</template>

<script setup>
import {
  MainModal,
  CloseMainModal,
  OpenMainModal,
} from "@empathyco/x-components";
</script>
```

### Customizing the content with classes

The `contentClass` prop can be used to add classes to the modal content.

```vue live
<template>
  <OpenMainModal>Open X</OpenMainModal>
  <MainModal contentClass="x-bg-neutral-75">
    <CloseMainModal>Close X</CloseMainModal>
  </MainModal>
</template>

<script setup>
import {
  MainModal,
  CloseMainModal,
  OpenMainModal,
} from "@empathyco/x-components";
</script>
```

### Customizing the modal events

The modal events can be customized by changing its props values:

- To add or subtract events to open or close the modal,
- To modify or remove the default [`UserClickedOutOfMainModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts) that the modal emits.

In this example, we are changing the `openEvents` prop to add another event, and removing the event
that the modal would emit when the user clicks out of the modal.

```vue live
<template>
  <OpenMainModal>Open X</OpenMainModal>
  <MainModal
    :openEvents="[
      'UserClickedOpenX',
      'UserOpenXProgrammatically',
      'MyCustomXEvent',
    ]"
    :outOfModalClickEvent="null"
  >
    <CloseMainModal>Close X</CloseMainModal>
  </MainModal>
</template>

<script setup>
import {
  MainModal,
  CloseMainModal,
  OpenMainModal,
} from "@empathyco/x-components";
</script>
```