---

title: CloseMainModal

---

# CloseMainModal

Button to close the MainModal.

## Slots

| Name                 | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> |             | None                                      |

## Events

This component emits the following events:

- [`UserClickedCloseX`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## Example

A basic example of how the close main modal button works:

```vue live
<template>
  <OpenMainModal>Open X</OpenMainModal>
  <MainModal>
    <CloseMainModal>Close X</CloseMainModal>
  </MainModal>
</template>

<script setup>
import {
  MainModal,
  CloseMainModal,
  OpenMainModal,
} from "@empathyco/x-components";
</script>
```