1 min read

BaseEventsModalClose

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:

Examples

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

Basic example

On clicked, the component closes the BaseEventsModal. The only needed thing is the content that the button should render, that can be any thing: a text, an image, an icon, a combination of the two of them...

<template>
  <BaseEventsCloseButton>
    <img src="./close-button-icon.svg" />
  </BaseEventsCloseButton>
</template>
<script>
  import { BaseEventsModalClose } from '@empathyco/x-components';
  export default {
    name: 'BaseEventsModalCloseTest',
    components: {
      BaseEventsModalClose
    }
  };
</script>

Defining another event to emit when clicking the button

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

<template>
  <BaseEventsModalClose closingEvent="UserClosedEmpathize">×</BaseEventsModalClose>
</template>
<script>
  import { BaseEventsModalClose } from '@empathyco/x-components';
  export default {
    name: 'BaseEventsModalCloseTest',
    components: {
      BaseEventsModalClose
    }
  };
</script>