Add an icons to dialog buttons in React Dialog component

18 Jan 202323 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
app.tsx
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;
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
app.tsx
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;
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
app.tsx
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;
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
app.tsx
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;
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;