---

title: BaseIdModalOpen

---

# BaseIdModalOpen

Component that allows to open a modal by emitting XEventsTypes.UserClickedOpenModal
with the modalId as payload. It allows full customization with the 'opening-element' slot and
exposes the 'openModal' function.

## Props

| Name                 | Description                                   | Type                | Default       |
| -------------------- | --------------------------------------------- | ------------------- | ------------- |
| <code>modalId</code> | The modalId of the modal that will be opened. | <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:

- [`UserClickedOpenModal`](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 opened.

## Examples

Component containing an event button that emits `UserClickedOpenModal` when it is 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 rendering content passed to the default slot inside the button and opening the modal
with modalId `my-modal`.

```vue
<template>
  <BaseIdModalOpen modalId="my-modal">
    <img src="./open-button-icon.svg" />
    <span>Open</span>
  </BaseIdModalOpen>
</template>

<script setup>
import { BaseIdModalOpen } 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 open the modal with modalId `my-modal`.

```vue
<template>
  <BaseIdModalOpen modalId="my-modal">
    <template #opening-element="{ openModal }">
      <ul>
        <li @click="openModal">Open here</li>
        <li>Not here</li>
      </ul>
    </template>
  </BaseIdModalOpen>
</template>

<script setup>
import { BaseIdModalOpen } from "@empathyco/x-components";
</script>
```