BaseEventsModalClose

Component contains an event button that emits XEventsTypes.UserClickedCloseEventsModal when clicked. It has a default slot to customize its contents.

Props

Name	Description	Type	Default
closingEvent	Event name to use for closing the modal.	PropsWithType<XEventsTypes, void>	'UserClickedCloseEventsModal'

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Button content with a text, an icon or both	None

Events

A list of events that the component will emit:

• UserClickedCloseEventsModal (opens new window): the event is emitted after the user clicks the button.

Examples

The BaseEventsModalClose component can be used to close the BaseEventsModal component.

Basic example

On click, the component closes the BaseEventsModal. The only required part is the content that the button should render, which can be anything: text, image, icon, or a combination.

<template>
  <BaseEventsModalClose>
    <img src="./close-button-icon.svg" />
  </BaseEventsModalClose>
</template>
<script setup>
import { BaseEventsModalClose } from '@empathyco/x-components'
</script>

Defining another event to emit when clicking the button

By default, it uses the same closingEvent that the BaseEventsModal is listening to. This event can be changed using the closingEvent prop.

<template>
  <BaseEventsModalClose closingEvent="UserClosedEmpathize">×</BaseEventsModalClose>
</template>
<script setup>
import { BaseEventsModalClose } from '@empathyco/x-components'
</script>