# Dialog

The `Dialog` component is a window overlaid on either the primary window or another dialog window, It can be opened anywhere by calling `context.dialog.open()` with an object containing the necessary parameters.

{% hint style="info" %}
Renamed from Modal in Gravity 12.
{% endhint %}

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FIInevsxrzRVstcE4SzTq%2Fdialog.png?alt=media&#x26;token=c368db27-aa8c-4a68-af6c-1d8a5c5c4b30" alt="Gravity dialog component" width="375"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { useContext } from 'react';
import { ViewContext, Button } from 'components/lib';

function MyComponent({ ...props }) {

  const viewContext = useContext(ViewContext);

  function openDialog(){
    viewContext.dialog.open({
      title: 'Add User',
      form: MyForm,
      buttonText: 'Send Invite',
      url: '/api/user/invite',
      method: 'POST'
    });
  }

  return (
    <div>
      <Button action={ openDialog } />
    <div/>
  );
}
```

### Params&#x20;

| Param       | Description                                                              | Required | Value        |
| ----------- | ------------------------------------------------------------------------ | -------- | ------------ |
| children    | children to render a custom dialog                                       | optional | component(s) |
| description | description message                                                      | optional | string       |
| form        | a [form object](https://docs.usegravity.app/gravity-web/components/form) | optional | object       |
| onClose     | callback executed when closed                                            | required | function     |
| open        | override the internal open state                                         | optional | boolean      |
| title       | dialog title                                                             | required | string       |
| method      | HTTP post type                                                           | optional | string       |
| url         | destination to send the form                                             | optional | string       |

### Notes

* The `Dialog` component uses `DialogPrimitive` components from `@radix-ui/react-dialog`.
* The `onClose` prop is a callback function that gets executed when the dialog is closed.
* The `open` prop can be used to control the open state of the dialog.
* The `title` and `description` props provide the title and description for the dialog.
* For more details, refer to the [Shadcn Dialog documentation](https://ui.shadcn.com/docs/components/dialog).