1 min read

BaseIdModalClose

BaseIdModalClose

Component that allows to close a modal by emitting XEventsTypes.UserClickedCloseModal. It allows full customization with the 'closing-element' slot and exposes the 'closeModal' function.

Props

Name Description Type Default
modalId The modalId of the modal that will be closed. string

Slots

Name Description Bindings
(name - type - description)
closing-element closing-element. It's the element that will trigger the modal closing. It's a closeModal Function - The function to close the modal.
default (Required) Button content with a text, an icon or both None

Events

A list of events that the component will emit:

Examples

Component containing an event button that emits UserClickedCloseModal when clicked with the modalId as payload. It has a default slot to customize its contents and can also be fully customized, replacing the default button with any other element.

Basic example

The component renders whatever is passed to it in the default slot inside the button and closes the modal with modalId my-modal.

<template>
  <BaseIdModalClose modalId="my-modal">
    <img src="./close-button-icon.svg" />
  </BaseIdModalClose>
</template>
<script>
  import { BaseIdModalClose } from '@empathyco/x-components';
  export default {
    name: 'BaseIdModalCloseTest',
    components: {
      BaseIdModalClose
    }
  };
</script>

Replacing the default button

The component renders whatever element is passed, replacing the default button and exposing the function to close the modal with modalId my-modal.

<template>
  <BaseIdModalClose modalId="my-modal">
    <template #closing-element="{ closeModal }">
      <ul>
        <li @click="closeModal">Close here</li>
        <li>Not here</li>
      </ul>
    </template>
  </BaseIdModalClose>
</template>
<script>
  import { BaseIdModalClose } from '@empathyco/x-components';
  export default {
    name: 'BaseIdModalCloseTest',
    components: {
      BaseIdModalClose
    }
  };
</script>