@empathyco/x-components/docs/API-reference/components/common/modals/x-components.open-main-modal.md

Empathy X Components

---

title: OpenMainModal

---

# OpenMainModal

Button to open the MainModal.

## Slots

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

## Events

This component emits the following events:

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

## See it in action

Here you have a basic example of how the open main modal button works.

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

<script>
import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components'

export default {
  name: 'XModalDemo',
  components: {
    MainModal,
    CloseMainModal,
    OpenMainModal,
  },
}
</script>
```