Dialog Options

Individual dialogs can customize their behavior and appearance through various options. All options are optional, and if not specified, the Provider's defaults are used.

position#

Specifies the position on screen where the dialog will appear. Uses a 9-grid system:

grunfeld.add(() => ({
  element: <div>Alert message</div>,
  position: "top-right",
}));

Each position is precisely placed using CSS flexbox.

lightDismiss#

Determines whether to close the dialog when clicking the backdrop (background):

grunfeld.add(() => ({
  element: <div>Important dialog</div>,
  lightDismiss: false, // Cannot close by clicking backdrop
}));

When set to false, users must explicitly click a button or press ESC to close the dialog.

renderMode#

Determines how the dialog is rendered:

• inline: z-index based rendering (default, supports all browsers)
• top-layer: Uses HTML <dialog> element (modern browsers only)

Top-layer mode has no z-index conflicts and leverages browser native features, but has limited browser support.

backdropStyle#

Customizes the backdrop's CSS styles:

grunfeld.add(() => ({
  element: <div>Styled dialog</div>,
  backdropStyle: {
    backgroundColor: "rgba(102, 126, 234, 0.1)",
    backdropFilter: "blur(8px)",
  },
}));

You can use any valid React CSS properties.

dismissCallback#

A callback function executed when the dialog closes:

grunfeld.add(() => ({
  element: <div>Dialog</div>,
  dismissCallback: () => {
    console.log("Dialog has been closed");
    // Analytics, logging, cleanup, etc.
  },
}));

⚠️ Warning: Do not call grunfeld.remove() or grunfeld.clear() within this callback. Since the dialog is already being removed, it may cause infinite loops or unexpected behavior.