Syncfusion AI Assistant

How can I help you?

Custom toast templates

13 Apr 20267 minutes to read

Create custom toast layouts using HTML templates rather than relying on predefined title and content properties. Templates enable rendering of complex content structures, custom styling, and interactive elements within toasts. Specify templates as HTML strings or query selectors referencing existing DOM elements.

Template string

Provide HTML content directly as a string to the template property:

template: "<div class='custom-toast'><h4>Custom Title</h4><p>Custom content here</p></div>"

Template selector

Reference an existing DOM element by its ID using a query selector:

template: "#templateId"

[Class-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
    toastInstance;
    position = { X: 'Right', Y: 'Bottom' };
    template = document.getElementById("template_toast_ele").innerHTML;
    toastCreated() {
        this.toastInstance.show();
    }
    toastShow() {
        this.toastInstance.show();
    }
    render() {
        return (<div>
        <ButtonComponent cssClass="e-primary" id='template_toast' onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent id='template_toast' ref={toast => this.toastInstance = toast} template={this.template} position={this.position} extendedTimeout={0} timeOut={120000} created={this.toastCreated = this.toastCreated.bind(this)}/>
      </div>);
    }
}
;
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

class App extends React.Component<{}, {position: any, target: any, width: any}> {
  public toastInstance: ToastComponent;
  public position = { X: 'Right', Y: 'Bottom' };
  public template = (document.getElementById("template_toast_ele") as HTMLElement).innerHTML;

  public toastCreated(): void {
    this.toastInstance.show();
  }

  public toastShow() {
    this.toastInstance.show();
  }

  public render() {
    return (
      <div>
        <ButtonComponent cssClass="e-primary" id='template_toast' onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent id='template_toast' ref={toast => this.toastInstance = toast!} template={this.template} position={this.position} extendedTimeout={0} timeOut={120000} created={this.toastCreated = this.toastCreated.bind(this)} />
      </div>
    );
  }
};
export default App;

[Functional-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App() {
    let toastInstance;
    let position;
    let target;
    let width;
    let position = { X: 'Right', Y: 'Bottom' };
    let template = document.getElementById("template_toast_ele").innerHTML;
    function toastCreated() {
        toastInstance.show();
    }
    function toastShow() {
        toastInstance.show();
    }
    return (<div>
      <ButtonComponent cssClass="e-primary" id='template_toast' onClick={toastShow = toastShow.bind(this)}> Show Toast </ButtonComponent>
      <ToastComponent id='template_toast' ref={toast => toastInstance = toast} template={template} position={position} extendedTimeout={0} timeOut={120000} created={toastCreated = toastCreated.bind(this)}/>
    </div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

function App(){
  let toastInstance: ToastComponent;
  let position: any;
  let target: any;
  let width: any;
  let position = { X: 'Right', Y: 'Bottom' };
  let template = (document.getElementById("template_toast_ele") as HTMLElement).innerHTML;

  function toastCreated(): void {
    toastInstance.show();
  }

  function toastShow() {
    toastInstance.show();
  }

  return (
    <div>
      <ButtonComponent cssClass="e-primary" id='template_toast' onClick={toastShow = toastShow.bind(this)}> Show Toast </ButtonComponent>
      <ToastComponent id='template_toast' ref={toast => toastInstance = toast!} template={template} position={position} extendedTimeout={0} timeOut={120000} created={toastCreated = toastCreated.bind(this)} />
    </div>
  );
}
export default App;

See Also