---

title: BaseIdModal

---

# BaseIdModal

Component containing a modal expecting a required prop, named `modalId`. It reacts to
`UserClickedOpenModal`, `UserClickedCloseModal` and `UserClickedOutOfModal` events, when their
payload matches the component's 'modalId' prop, to handle its open/close state. The default
slot offers the possibility to customise the modal content.

## Props

| Name                   | Description                                                | Type                       | Default       |
| ---------------------- | ---------------------------------------------------------- | -------------------------- | ------------- |
| <code>animation</code> | Animation to use for opening/closing the modal.            | <code>AnimationProp</code> | <code></code> |
| <code>modalId</code>   | The modalId to use for the open and close event listeners. | <code>string</code>        | <code></code> |

## Slots

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

## Events

A list of events that the component will emit:

- [`UserClickedOutOfModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks outside the modal. The event payload is the id of the
  modal and a metadata with the target element that emitted it.

## Examples

The `BaseIdModal` component reacts to the `UserClickedOpenModal`, `UserClickedCloseModal` and
`UserClickedOutOfModal` to handle its open/close state. The component filters out the events which
payload doesn't match its `modalId` prop and reacts only to those who match this criteria.

### Basic usage

The component interacts with both `BaseIdModalOpen` and `BaseIdModalClose` components, which have to
share the same value in their `modalId` prop to work:

```vue
<template>
  <div>
    <BaseIdModalOpen modalId="myModal">Open</BaseIdModalOpen>
    <BaseIdModal modalId="myModal">
      <img src="success.png" />
      <BaseIdModalClose modalId="myModal">Close</BaseIdModalClose>
    </BaseIdModal>
  </div>
</template>

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

### Customized usage

#### Customizing the content with classes

The `contentClass` prop can be used to add classes to the modal content.

```vue
<template>
  <div>
    <BaseIdModalOpen modalId="myModal">Open</BaseIdModalOpen>
    <BaseIdModal modalId="myModal" contentClass="x-bg-neutral-75">
      <img src="success.png" />
      <BaseIdModalClose modalId="myModal">Close</BaseIdModalClose>
    </BaseIdModal>
  </div>
</template>

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