You can add an 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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Dialog</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='container'>
<div id="dialog">
<div id='loader'>Loading....</div>
</div>
</div>
</body>
</html>import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
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;In the following sample, dialog footer buttons are customized with icons using footerTemplate property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Dialog</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='container'>
<div id="dialog">
<div id='loader'>Loading....</div>
</div>
</div>
</body>
</html>import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
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;