HOME

Grids
- Data GridUpdated
- Pivot TableUpdated
- Tree Grid
- Spreadsheet
Interactive Chat
- AI AssistView
- Chat UIpreview
Data Visualization
- ChartsUpdated
- 3D Chart
- 3D Circular Chart
- Stock ChartUpdated
- Arc Gauge
- Circular Gauge
- Diagram
- HeatMap Chart
- Linear Gauge
- MapsUpdated
- Range Selector
- Smith Chart
- Sparkline Charts
- TreeMap
- Bullet Chart
- Kanban
Forms
- Query Builder
File Viewers & Editors
- PDF Viewer
- Rich Text Editor
- Markdown Editor
- Document Editor
- Image EditorUpdated
Calendars
- SchedulerUpdated
- Calendar
- DatePicker
- DateRangePicker
- DateTimePicker
- TimePicker
- Gantt Chart
Buttons
- Button
- Chips
- Floating Action Button
- SpeedDial
Dropdowns
- AutoCompleteUpdated
- ComboBoxUpdated
- Dropdown ListUpdated
- Dropdown Tree
- MultiSelect DropdownUpdated
- List Box
- MultiColumn ComboBox
- Mention
Navigation
- Accordion
- AppBar
- Breadcrumb
- Carousel
- Context MenuUpdated
- Menu Bar
- Sidebar
- Tabs
- Toolbar
- TreeView
- File Manager
- Ribbon
- Stepper
Notifications
- Badge
- Message
- Toast
- Progress Bar
- Skeleton
Inputs
- TextBox
- TextArea
- Input Mask
- Numeric Textbox
- Color Picker
- File Upload
- Range Slider
- Signature
- In-place Editor
- Rating
- OTP Input
Layout
- Avatar
- Card
- Dialog
- Predefined Dialogs
- ListView
- Tooltip
- Splitter
- Dashboard Layout
- Timeline

All Controls

Dialog
Default Functionalities
Modal
Template
Ajax Content
Draggable
Resizable
Positioning
Animation
Multiple Dialogs
Components inside Dialog

Dialog

Default Functionalities

This example demonstrates the default rendering of the dialog component with minimum configuration. Click close or press ESC to close the dialog. Click “open” to show the dialog again, if it is closed.

The dialog component is used to display information and get input from the user. The dialog component is classified as modal and non-modal dialog depend on its interaction with parent application.

Modal - It creates overlay that disable interaction with the parent application, and user should respond with modal before continuing with other applications.
Non-modal - It does not prevent user interaction with parent application.

Transform your Next.js web apps today with Syncfusion^® React components

80+ high-performance and responsive UI components

Dedicated support

Hassle-free licensing

TRY IT FOR FREE