HelpBot Assistant

How can I help you?

Action buttons in React Toast component

20 Feb 20268 minutes to read

Add interactive action buttons to toast notifications to enable users to take immediate actions without navigating away. Configure action buttons using the buttons property by specifying Button component models and their click event handlers. This pattern is ideal for actionable notifications such as undo confirmations, approval requests, or quick task invocations.

[Class-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
    toastInstance;
    position = { X: "Right", Y: "Bottom" };
    buttons = [
        { model: { content: "Ignore" } },
        { model: { content: "reply" } }
    ];
    toastShow() {
        this.toastInstance.show();
    }
    toastCreated() {
        this.toastInstance.show();
    }
    contentTemplate() {
        return <p><img src='./laura.png'/></p>;
    }
    render() {
        return (<div>
        <ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent ref={toast => this.toastInstance = toast} title="Anjolie Stokes" content={this.contentTemplate} position={this.position} width='230' height='250' buttons={this.buttons} created={this.toastCreated = this.toastCreated.bind(this)}/>
      </div>);
    }
}
;
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public toastInstance: ToastComponent;
  public position = { X: "Right", Y: "Bottom" };
  private buttons: object[] = [
    { model: { content: "Ignore" } },
    { model: { content: "reply" } }
  ];

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

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

  public contentTemplate() {
    return <p><img src='./laura.png'/></p>;
  }

  public render() {
    return (
      <div>
        <ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent ref={toast => this.toastInstance = toast!} title="Anjolie Stokes" content={this.contentTemplate} position={this.position} width='230' height='250' buttons={this.buttons} created={this.toastCreated = this.toastCreated.bind(this)} />
      </div>
    );
  }
};
export default App;

[Functional-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App() {
    let toastInstance;
    let position = { X: "Right", Y: "Bottom" };
    let buttons = [
        { model: { content: "Ignore" } },
        { model: { content: "reply" } }
    ];
    function toastShow() {
        toastInstance.show();
    }
    function toastCreated() {
        toastInstance.show();
    }
    function contentTemplate() {
        return <p><img src='./laura.png'/></p>;
    }
    return (<div>
          <ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
          <ToastComponent ref={toast => toastInstance = toast} title="Anjolie Stokes" content={contentTemplate} position={position} width='230' height='250' buttons={buttons} created={toastCreated.bind(this)}/>
        </div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

function App() {
    let toastInstance: ToastComponent;
    let position = { X: "Right", Y: "Bottom" };
    let buttons: object[] = [
      { model: { content: "Ignore" } },
      { model: { content: "reply" } }
    ];
  
    function toastShow() {
      toastInstance.show();
    }
  
    function toastCreated() {
      toastInstance.show();
    }
  
    function contentTemplate() {
      return <p><img src='./laura.png'/></p>;
    }
  
    return (
        <div>
          <ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
          <ToastComponent ref={toast => toastInstance = toast!} title="Anjolie Stokes" content={contentTemplate} position={position} width='230' height='250' buttons={buttons} created={toastCreated.bind(this)} />
        </div>
    );
}
export default App;

See Also