@empathyco/x-components/docs/API-reference/api/x-components.baseeventsmodal.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseEventsModal](./x-components.baseeventsmodal.md)

## BaseEventsModal variable

Component containing a modal that emits a [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of [XEvent](./x-components.xevent.md) to listen to in order to close also the modal, eventsToOpenModal prop, another list of [XEvent](./x-components.xevent.md) 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.

**Signature:**

```typescript
_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    eventsToOpenModal: {
        type: PropType<XEvent[]>;
        default: () => XEvent[];
    };
    eventsToCloseModal: {
        type: PropType<XEvent[]>;
        default: () => XEvent[];
    };
    bodyClickEvent: {
        type: PropType<XEvent>;
        default: string;
    };
    animation: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
}>, {
    isOpen: import("vue").Ref<boolean, boolean>;
    openerElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
    baseModalEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
    emitBodyClickEvent: (event: MouseEvent | FocusEvent) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    eventsToOpenModal: {
        type: PropType<XEvent[]>;
        default: () => XEvent[];
    };
    eventsToCloseModal: {
        type: PropType<XEvent[]>;
        default: () => XEvent[];
    };
    bodyClickEvent: {
        type: PropType<XEvent>;
        default: string;
    };
    animation: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
}>> & Readonly<{}>, {
    eventsToOpenModal: (keyof import("../../wiring/events.types").XEventsTypes)[];
    eventsToCloseModal: (keyof import("../../wiring/events.types").XEventsTypes)[];
    bodyClickEvent: keyof import("../../wiring/events.types").XEventsTypes;
}, {}, {
    BaseModal: import("vue").DefineComponent<{}, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
```