[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [Empathize](./x-components.empathize.md) ## Empathize variable Component containing the empathize. It has a required slot to define its content. **Signature:** ```typescript _default: import("vue").DefineComponent; default: () => string[]; }; eventsToCloseEmpathize: { type: PropType; default: () => string[]; }; animation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, any>; }; hasContent: { type: BooleanConstructor; default: boolean; }; searchAndCloseOnNoContent: { type: BooleanConstructor; default: boolean; }; searchAndCloseDebounceInMs: { type: NumberConstructor; default: number; }; }>, { empathizeRef: import("vue").Ref; isOpenAndHasContent: import("vue").ComputedRef; open: () => void; close: () => void; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; default: () => string[]; }; eventsToCloseEmpathize: { type: PropType; default: () => string[]; }; animation: { type: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; default: () => import("vue").DefineComponent<{}, {}, any>; }; hasContent: { type: BooleanConstructor; default: boolean; }; searchAndCloseOnNoContent: { type: BooleanConstructor; default: boolean; }; searchAndCloseDebounceInMs: { type: NumberConstructor; default: number; }; }>> & Readonly<{}>, { eventsToOpenEmpathize: (keyof import("../../../wiring").XEventsTypes)[]; eventsToCloseEmpathize: (keyof import("../../../wiring").XEventsTypes)[]; animation: string | Function | Record; hasContent: boolean; searchAndCloseOnNoContent: boolean; searchAndCloseDebounceInMs: number; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```