# Modal

## Overview

The Modal component serves as a container for a group of components displayed on button click.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F23HjEFVtZADAkZs3gqyz%2FCleanShot%202025-08-05%20at%2017.13.30%402x-min.png?alt=media&#x26;token=89fae678-3443-49c9-b744-48b0abc0c514" alt=""><figcaption></figcaption></figure>

### Properties

| Name   | Type     | Description    |
| ------ | -------- | -------------- |
| `name` | `string` | Component name |

### Methods

<table><thead><tr><th width="202.15625">Name</th><th width="168.3984375">Parameters</th><th width="100.609375">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>open</code></td><td>–</td><td><code>void</code></td><td>Open the modal window</td></tr><tr><td><code>close</code></td><td>–</td><td><code>void</code></td><td>Close the modal window</td></tr><tr><td><code>setOpenButtonDisabled</code></td><td><code>disabled: boolean</code></td><td><code>void</code></td><td>Disable or enable the open button</td></tr><tr><td><code>setValue</code></td><td><code>data: object</code></td><td><code>void</code></td><td>Set component data. Data is an object with arbitrary structure.</td></tr><tr><td><code>resetValue</code></td><td>–</td><td><code>void</code></td><td>Reset component to the initial value</td></tr><tr><td><code>validate</code></td><td>–</td><td><code>void</code></td><td>Trigger form validation</td></tr><tr><td><code>resetValidation</code></td><td>–</td><td><code>void</code></td><td>Clear validation errors</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="137.3359375">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr><tr><td><strong>On Open</strong></td><td>Triggered when the modal is opened</td></tr><tr><td><strong>On Close</strong></td><td>Triggered when the modal is closed</td></tr></tbody></table>

## Working with the component

The Modal component consists of a *button* and the *modal window* itself that you can customize to suit your needs.

**Button** - you can configure button appearance, text, as well as manage its visibility or disable it based on a specific condition.

**Modal window** - you can adjust the size of the window, hide/show the modal's header, and configure modal's closing options. Inside the modal window, you can place different components or simply copy-paste any existing components in your application.\
For example, you can add a Modal to display product details and place the Detail component inside the modal window. In the *Data* field of the Detail component, you need to reference the necessary data - `{{ui.productsTable.selectedRow.data}}`.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FWQUG6wGd8db10etMowM9%2FCleanShot%202025-08-13%20at%2012.54.13%402x-min.png?alt=media&#x26;token=87ff9e81-b5e6-473b-800a-562743320aa6" alt=""><figcaption></figcaption></figure>