Dialog Layout

Source@react-form-builder/components-material-ui

Introduction

The Dialog Layout preset provides a complete, ready-to-use dialog structure that combines multiple Material UI dialog components into a single, cohesive unit. This preset is designed for rapid implementation of common dialog patterns such as confirmation dialogs, alert dialogs, and simple form dialogs. It follows Material Design guidelines and includes all necessary dialog sections with sensible defaults.

The Dialog Layout preset is included within the following NPM package: @react-form-builder/components-material-ui.

This preset component can be used as-is for common dialog scenarios or customized by modifying its individual subcomponents to fit specific design and functionality requirements.

Component structure

The MuiDialogLayout preset combines several subcomponents to create a complete dialog:

1. Dialog Title - MuiDialogTitle component displaying the dialog header
2. Dialog Content - MuiDialogContent container with proper padding and spacing
3. Dialog Content Text - MuiDialogContentText component for the main dialog message
4. Dialog Actions - MuiDialogActions container with two action buttons