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.

Renamed from Modal in Gravity 12.

Preview

Code

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

ParamDescriptionRequiredValue

children

children to render a custom dialog

optional

component(s)

description

description message

optional

string

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.

Last updated