@empathyco/x-components/docs/API-reference/components/common/modals/x-components.main-modal.md

Empathy X Components

---

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)

## See it in action

Here you have a basic example of how the main modal works.

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

<script>
import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'

export default {
  name: 'MainModalDemo',
  components: {
    MainModal,
    CloseMainModal,
    OpenMainModal,
  },
}
</script>
```

### Customizing the content with classes

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

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

<script>
import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'

export default {
  name: 'MainModalDemo',
  components: {
    MainModal,
    CloseMainModal,
    OpenMainModal,
  },
}
</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>
  <div>
    <OpenMainModal>Open X</OpenMainModal>
    <MainModal
      :openEvents="['UserClickedOpenX', 'UserOpenXProgrammatically', 'MyCustomXEvent']"
      :outOfModalClickEvent="null"
    >
      <CloseMainModal>Close X</CloseMainModal>
    </MainModal>
  </div>
</template>

<script>
import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'

export default {
  name: 'MainModalDemo',
  components: {
    MainModal,
    CloseMainModal,
    OpenMainModal,
  },
}
</script>
```