[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseModal](./x-components.basemodal.md) ## BaseModal variable Base component with no XPlugin dependencies that serves as a utility for constructing more complex modals. **Signature:** ```typescript _default: import("vue").DefineComponent<{ open: { type: BooleanConstructor; required: true; }; focusOnOpen: { type: BooleanConstructor; default: boolean; }; referenceSelector: StringConstructor; animation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, {}, {}>; }; overlayAnimation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, {}, {}>; }; contentClass: StringConstructor; overlayClass: StringConstructor; }, { emitOverlayClicked: (event: Event) => void; isWaitingForLeave: import("vue").Ref; modalContentRef: import("vue").Ref; modalRef: import("vue").Ref; }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click:overlay" | "focusin:body")[], "click:overlay" | "focusin:body", import("vue").PublicProps, Readonly import("vue").DefineComponent<{}, {}, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, {}, {}>; }; overlayAnimation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, {}, {}>; }; contentClass: StringConstructor; overlayClass: StringConstructor; }>> & { "onClick:overlay"?: ((...args: any[]) => any) | undefined; "onFocusin:body"?: ((...args: any[]) => any) | undefined; }, { focusOnOpen: boolean; animation: string | Function | Record; overlayAnimation: string | Function | Record; }, {}> ```