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

Empathy X Components

---

title: BaseEventsModal

---

# BaseEventsModal

Component containing a modal that emits a XEventsTypes.UserClickedCloseEventsModal when
clicking outside the content rendered in the default slot and can receive, through the
eventsToCloseModal prop, a list of XEvent to listen to in order to close
also the modal, eventsToOpenModal prop, another list of XEvent to customize
the events to listen to open the modal and a prop, displayOverlay, to display an
overlay over the rest of the html. The default slot offers the possibility to customize the
modal content.

## Props

| Name                            | Description                                                                   | Type                       | Default                                                                                     |
| ------------------------------- | ----------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------- |
| <code>eventsToOpenModal</code>  | Array of XEvent to listen to open the modal.                                  | <code>XEvent[]</code>      | <code>(): XEvent[] => ['UserClickedOpenEventsModal']</code>                                 |
| <code>eventsToCloseModal</code> | Array of XEvent to listen to close the modal.                                 | <code>XEvent[]</code>      | <code>(): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']</code> |
| <code>bodyClickEvent</code>     | Event to emit when any part of the website out of the modal has been clicked. | <code>XEvent</code>        | <code>'UserClickedOutOfEventsModal'</code>                                                  |
| <code>animation</code>          | Animation to use for opening/closing the modal.                               | <code>AnimationProp</code> | <code></code>                                                                               |

## Slots

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

## Events

A list of events that the component will emit:

- [`UserClickedCloseEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after clicking outside the content rendered in the default slot.
- [`UserClickedOutOfEventsModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after clicking outside the modal.
- Custom events to open or close the modal.

## Examples

The `BaseEventsModal` component handles the modal open/close state via the events passed via props.
It is configured by default to work as a modal for a whole search application, but if the events are
changed, it can work as a modal that is opened/closed when the events it is listening to are emitted.

### Basic usage

The component interacts with the open and close components, which are preconfigured by default to
emit the same events that the `BaseEventsModal` component is listening to:

```vue
<template>
  <div>
    <BaseEventsModalOpen>Open</BaseEventsModalOpen>
    <BaseEventsModal>
      <BaseEventsModalClose>Close</BaseEventsModalClose>
      <img src="success.png" />
    </BaseEventsModal>
  </div>
</template>

<script setup>
import {
  BaseEventsModalOpen,
  BaseEventsModal,
  BaseEventsModalClose,
} from "@empathyco/x-components";
</script>
```

### Customizing the events

If needed, the events to open/close the modal can be changed. The modal can listen to one or more
events. To do so, the `eventsToCloseModal` and `eventsToOpenModal` props can be used. Below you can
see a full example on how this would work with custom events.

```vue
<template>
  <div>
    <BaseEventsModalOpen openingEvent="UserClickedOpenMyCustomModal"
      >Open</BaseEventsModalOpen
    >
    <BaseEventsModal
      :eventsToCloseModal="eventsToCloseModal"
      :eventsToOpenModal="eventsToOpenModal"
    >
      <BaseEventsModalClose
        closingEvent="UserClickedCloseMyCustomModalFromHeader"
      >
        Close from header
      </BaseEventsModalClose>
      <img src="success.png" />
      <BaseEventsModalClose
        closingEvent="UserClickedCloseMyCustomModalFromFooter"
      >
        Close from footer
      </BaseEventsModalClose>
    </BaseEventsModal>
  </div>
</template>

<script setup>
import {
  BaseEventsModalOpen,
  BaseEventsModal,
  BaseEventsModalClose,
} from "@empathyco/x-components";
const eventsToOpenModal = ["UserClickedOpenMyCustomModal"];
const eventsToCloseModal = [
  "UserClickedCloseMyCustomModalFromHeader",
  "UserClickedCloseMyCustomModalFromFooter",
];
</script>
```

### Customizing the content with classes

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

```vue
<template>
  <div>
    <BaseEventsModalOpen>Open</BaseEventsModalOpen>
    <BaseEventsModal contentClass="x-bg-neutral-75">
      <BaseEventsModalClose>Close</BaseEventsModalClose>
      <img src="success.png" />
    </BaseEventsModal>
  </div>
</template>

<script setup>
import {
  BaseEventsModalOpen,
  BaseEventsModal,
  BaseEventsModalClose,
} from "@empathyco/x-components";
</script>
```