React Dialog Overview

    The Ignite UI for React Dialog component is used to display some information or prompt the user for an action or confirmation. It is shown in a modal window, which means that the user is not allowed to interact with the main app until a certain action is performed that closes the dialog.

    Ignite UI for React Dialog Example

    This sample demonstrates how to create a Dialog component in React.

    EXAMPLE
    TSX
    CSS

    Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

    Usage

    First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react
    cmd

    You will then need to import the React IgrDialog, its necessary CSS, and register its module, like so:

    import { IgrDialogModule, IgrDialog } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    IgrDialogModule.register();
    tsx

    For a complete introduction to the Ignite UI for React, read the Getting Started topic.

    The simplest way to display the dialog component is to use its show method and call it on a button click.

    <IgrButton variant="contained" clicked={this.onDialogShow}>
        <span>Show Dialog</span>
    </IgrButton>
    
    <IgrDialog ref={this.onDialogRef}>
        <span>Dialog Message</span>
    </IgrDialog>
    
    public onDialogRef(dialog: IgrDialog) {
        if (!dialog) { return; }
        this.dialogRef = dialog;
    }
    
    public onDialogShow() {
        if (this.dialogRef) {
            this.dialogRef.show();
        }
    }
    tsx

    The Dialog component provides an open property, which gives you the ability to configure its state as per your application scenario.

    Use the title property to set the title of the dialog. However, if any content is provided in the title slot, it will take precedence over the property.

    Action buttons or additional information can be placed in the bottom part of the dialog via the footer slot. If no content is added there, a default OK button will be shown that closes the Dialog when clicked. In case you do not want this button to be shown you can set the hideDefaultAction property to true. The default value is false.

    Closing

    By default, the Dialog is closed automatically when the user presses ESC. You could prevent this behavior using the keepOpenOnEscape property. The default value is false. If there is an open dropdown (or any other element that should handle ESC internally) in the dialog, pressing ESC once will close the dropdown and pressing it again will close the dialog.

    Use the closeOnOutsideClick property to configure if the dialog should be closed when clicking outside of it. The default value is false.

    EXAMPLE
    TSX
    CSS

    Form

    Form elements can close a Dialog if they have the attribute method="dialog". Submitting the form will trigger the closing of the dialog.

    EXAMPLE
    TSX
    CSS

    Styling

    The dialog component exposes several CSS parts (base, title, content and footer) to give you full control over its style.

    igc-dialog::part(content) {
        background: #011627;
        color: white;
    }
    
    igc-dialog::part(title),
    igc-dialog::part(footer) {
        background: #011627;
        color: #ECAA53;
    }
    css

    EXAMPLE
    TSX
    CSS

    Ignite UI for React | CTA Banner

    API References

    Additional Resources