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.
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
constructor() {
super(...arguments);
this.settings = { effect: 'Zoom', duration: 400, delay: 0 };
this.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;In the following sample, dialog footer buttons are customized with icons using footerTemplate property.
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
constructor() {
super(...arguments);
this.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;