---

title: 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       |
| -------------------- | --------------------------------------------- | ------------------- | ------------- |
| <code>modalId</code> | The modalId of the modal that will be closed. | <code>string</code> | <code></code> |

## Slots

| Name                 | Description                                            | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |

## Events

A list of events that the component will emit:

- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the id of the modal
  that is going to be closed.

## 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`.

```vue
<template>
  <BaseIdModalClose modalId="my-modal">
    <img src="./close-button-icon.svg" />
  </BaseIdModalClose>
</template>

<script setup>
import { BaseIdModalClose } from "@empathyco/x-components";
</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`.

```vue
<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 setup>
import { BaseIdModalClose } from "@empathyco/x-components";
</script>
```