> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/modal.md).

# 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="/files/kkBXLnRgBPxcg7ZmUVHY" 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](/gravity-web/components/form.md) | 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).