How to add icons to buttons in React Dialog

4 Sep 202624 minutes to read

You can add icons to the React Dialog buttons using the buttons property or the footerTemplate property. Use the buttons property when you want built-in Button components with their standard behavior; use the footerTemplate property when you need full custom markup in the footer. For detailed information about React Dialog buttons, refer to the Template in React Dialog topic.

The buttons property accepts an array of objects whose buttonModel field follows the Syncfusion ButtonModel interface (for example, content, iconCss, isPrimary, and cssClass). See the ButtonModel API reference for the full list of properties.

Using the buttons property

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

[Class-component]

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]

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;

Using the footerTemplate property

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

[Class-component]

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]

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;

See Also