[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 and two props to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`. **Signature:** ```typescript _default: import("vue").DefineComponent<{ eventsToOpenEmpathize: { type: PropType<(keyof import("../../../wiring").XEventsTypes)[]>; default: () => string[]; }; eventsToCloseEmpathize: { type: PropType<(keyof import("../../../wiring").XEventsTypes)[]>; default: () => string[]; }; 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>, {}, {}>; }; }, { close: () => void; empathizeRef: import("vue").Ref; hasContent: import("vue").ComputedRef; isOpen: import("vue").Ref; open: () => void; }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; default: () => string[]; }; eventsToCloseEmpathize: { type: PropType<(keyof import("../../../wiring").XEventsTypes)[]>; default: () => string[]; }; 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>, {}, {}>; }; }>>, { eventsToOpenEmpathize: (keyof import("../../../wiring").XEventsTypes)[]; eventsToCloseEmpathize: (keyof import("../../../wiring").XEventsTypes)[]; animation: string | Function | Record; }, {}> ```