Add icons to dialog buttons in React Dialog component

13 Apr 202623 minutes to read

You can add icons to the dialog buttons using the buttons property or footerTemplate property . For detailed information about dialog buttons, refer to the documentation section.

In the following sample, dialog footer buttons are customized with icons using buttons property.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    settings = { effect: 'Zoom', duration: 400, delay: 0 };
    dialogInstance;
    buttons = [{
            buttonModel: {
                content: 'Ok',
                iconCss: 'e-icons e-ok-icon',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'No',
                iconCss: 'e-icons e-close-icon',
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }
    ];
    handleClick() {
        this.dialogInstance.show();
    }
    render() {
        return (<div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
     <DialogComponent id='dialog' header='Delete Multiple Items' animationSettings={this.settings} showCloseIcon={true} closeOnEscape={true} width='300px' buttons={this.buttons} content='Are you sure you want to permanently delete all of these items?' ref={dialog => this.dialogInstance = dialog} target='#dialog-target'/>
  </div>);
    }
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public settings: any = { effect: 'Zoom', duration: 400, delay: 0 };

public dialogInstance: DialogComponent;

public buttons: any = [{
    buttonModel: {
        content: 'Ok',
        iconCss: 'e-icons e-ok-icon',
        isPrimary: true,
    },
    'click': () => {
        this.dialogInstance.hide();
    }
},
{
    buttonModel: {
        content: 'No',
        iconCss: 'e-icons e-close-icon',
    },
    'click': () => {
        this.dialogInstance.hide();
    }
}
];

public handleClick() {
    this.dialogInstance.show();
}

public render() {
  return (
  <div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
     <DialogComponent id='dialog' header='Delete Multiple Items' animationSettings={this.settings} showCloseIcon={true} closeOnEscape={true}
      width='300px' buttons={this.buttons} content='Are you sure you want to permanently delete all of these items?' ref={dialog => this.dialogInstance = dialog!}
      target='#dialog-target'/>
  </div>);
}
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let settings = { effect: 'Zoom', duration: 400, delay: 0 };
    let dialogInstance;
    const buttons = [{
            buttonModel: {
                content: 'Ok',
                iconCss: 'e-icons e-ok-icon',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'No',
                iconCss: 'e-icons e-close-icon',
            },
            'click': () => {
                dialogInstance.hide();
            }
        }
    ];
    function handleClick() {
        dialogInstance.show();
    }
    return (<div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
       <DialogComponent id='dialog' header='Delete Multiple Items' animationSettings={settings} showCloseIcon={true} closeOnEscape={true} width='300px' buttons={buttons} content='Are you sure you want to permanently delete all of these items?' ref={dialog => dialogInstance = dialog} target='#dialog-target'/>
    </div>);
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App(){
    let settings: any = { effect: 'Zoom', duration: 400, delay: 0 };
    let dialogInstance: DialogComponent;
    const buttons: any = [{
      buttonModel: {
          content: 'Ok',
          iconCss: 'e-icons e-ok-icon',
          isPrimary: true,
      },
      'click': () => {
          dialogInstance.hide();
      }
    },
    {
      buttonModel: {
          content: 'No',
          iconCss: 'e-icons e-close-icon',
      },
      'click': () => {
          dialogInstance.hide();
      }
    }
    ];
  
    function handleClick() {
        dialogInstance.show();
    }
    return (
    <div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
       <DialogComponent id='dialog' header='Delete Multiple Items' animationSettings={settings} showCloseIcon={true} closeOnEscape={true}
        width='300px' buttons={buttons} content='Are you sure you want to permanently delete all of these items?' ref={dialog => dialogInstance = dialog!}
        target='#dialog-target'/>
    </div>);
}

export default App;

In the following sample, dialog footer buttons are customized with icons using footerTemplate property.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    settings = { effect: 'Zoom', duration: 400, delay: 0 };
    footer() {
        return (<div>
            <button id='Button1' className="e-control e-btn e-primary e-flat" data-ripple="true">
            <span className="e-btn-icon e-icons e-ok-icon e-icon-left"/>Yes</button>
            <button id="Button2" className="e-control e-btn e-flat" data-ripple="true">
            <span className="e-btn-icon e-icons e-close-icon e-icon-left"/>No</button>
        </div>);
    }
    componentDidMount() {
        setTimeout(() => {
            document.getElementById('Button1').onclick = () => {
                this.dialogInstance.hide();
            };
            document.getElementById('Button2').onclick = () => {
                this.dialogInstance.hide();
            };
        });
    }
    handleClick() {
        this.dialogInstance.show();
    }
    render() {
        return (<div className="App" id='container'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>

     <DialogComponent id='dialog' header='Delete Multiple Items' animationSettings={this.settings} showCloseIcon={true} closeOnEscape={true} width='300px' footerTemplate={this.footer} content='Are you sure you want to permanently delete all of these items?' ref={dialog => this.dialogInstance = dialog} target='#container'/>
  </div>);
    }
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
public dialogInstance: DialogComponent;

public settings: any = { effect: 'Zoom', duration: 400, delay: 0 };

public footer(): JSX.Element {
    return (
        <div>
            <button id='Button1' className="e-control e-btn e-primary e-flat" data-ripple="true">
            <span className="e-btn-icon e-icons e-ok-icon e-icon-left"/>Yes</button>
            <button id="Button2" className="e-control e-btn e-flat" data-ripple="true">
            <span className="e-btn-icon e-icons e-close-icon e-icon-left"/>No</button>
        </div>
    )
}

public componentDidMount() {
    setTimeout(() => {
        (document.getElementById('Button1') as any).onclick = () => {
            this.dialogInstance.hide();
        };
        (document.getElementById('Button2') as any).onclick = () => {
            this.dialogInstance.hide();
        };
    });
}

public handleClick() {
    this.dialogInstance.show();
}

public render() {
  return (
  <div className="App" id='container'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>

     <DialogComponent id='dialog'
            header='Delete Multiple Items' animationSettings={this.settings} showCloseIcon={true} closeOnEscape={true}
            width='300px' footerTemplate={this.footer}
            content='Are you sure you want to permanently delete all of these items?' ref={dialog => this.dialogInstance = dialog!}
            target='#container'/>
  </div>);
}
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let dialogInstance;
    let settings = { effect: 'Zoom', duration: 400, delay: 0 };
    function footer() {
        return (<div>
                <button id='Button1' className="e-control e-btn e-primary e-flat" data-ripple="true">
                <span className="e-btn-icon e-icons e-ok-icon e-icon-left"/>Yes</button>
                <button id="Button2" className="e-control e-btn e-flat" data-ripple="true">
                <span className="e-btn-icon e-icons e-close-icon e-icon-left"/>No</button>
            </div>);
    }
    function componentDidMount() {
        setTimeout(() => {
            document.getElementById('Button1').onclick = () => {
                dialogInstance.hide();
            };
            document.getElementById('Button2').onclick = () => {
                dialogInstance.hide();
            };
        });
    }
    function handleClick() {
        dialogInstance.show();
    }
    return (<div className="App" id='container'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>

        <DialogComponent id='dialog' header='Delete Multiple Items' animationSettings={settings} showCloseIcon={true} closeOnEscape={true} width='300px' footerTemplate={footer} content='Are you sure you want to permanently delete all of these items?' ref={dialog => dialogInstance = dialog} target='#container'/>
    </div>);
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
    let dialogInstance: DialogComponent;
    let settings: any = { effect: 'Zoom', duration: 400, delay: 0 };
    function footer(): JSX.Element {
        return (
            <div>
                <button id='Button1' className="e-control e-btn e-primary e-flat" data-ripple="true">
                <span className="e-btn-icon e-icons e-ok-icon e-icon-left"/>Yes</button>
                <button id="Button2" className="e-control e-btn e-flat" data-ripple="true">
                <span className="e-btn-icon e-icons e-close-icon e-icon-left"/>No</button>
            </div>
        )
    }
    function componentDidMount() {
        setTimeout(() => {
            (document.getElementById('Button1') as any).onclick = () => {
                dialogInstance.hide();
            };
            (document.getElementById('Button2') as any).onclick = () => {
                dialogInstance.hide();
            };
        });
    }
    function handleClick() {
        dialogInstance.show();
    }
    return (
    <div className="App" id='container'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>

        <DialogComponent id='dialog'
            header='Delete Multiple Items' animationSettings={settings} showCloseIcon={true} closeOnEscape={true}
            width='300px' footerTemplate={footer}
            content='Are you sure you want to permanently delete all of these items?' ref={dialog => dialogInstance = dialog!}
            target='#container'/>
    </div>);
}
export default App;