How can I help you?
Toast timeout and dismissal
20 Feb 202622 minutes to read
Control how long toasts remain visible before automatic dismissal using timeout properties. The Toast component provides flexible timeout configuration for different notification scenarios and user interactions.
Automatic dismissal timeout
The timeOut property specifies how long a toast displays in milliseconds before automatically disappearing. The default timeout is 5000 milliseconds (5 seconds). Once the timeout expires, the toast is automatically removed from the screen.
Accessibility note: Consider users with vision or motor impairments who may need more time to read and interact with notifications. Provide manual close buttons or longer timeouts for critical information.
Visual timeout indication
Display a progress bar indicating remaining toast display time using the Progress Bar feature. Enable the progress bar by setting showProgressbar to true. This provides users with clear visual feedback about when the toast will automatically dismiss.
Extended timeout on hover
The extendedTimeOut property extends the display duration when users hover over a toast, giving them additional time to read or interact with content. This prevents accidental dismissal of important notifications.
[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" } }
];
toastCreated() {
this.toastShow();
}
toastShow() {
const value = parseInt(document.getElementById('timeOut').value, 0);
this.toastInstance.show({ timeOut: value });
}
contentTemplate() {
return <p><img src='./laura.png'/></p>;
}
render() {
return (<div>
<div className='e-float-input'>
<input type='text' className='e-input' id='timeOut' defaultValue={'0'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">TimeOut</label>
</div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent id="elementToastTime" ref={toast => this.toastInstance = toast} title="Anjolie Stokes" content={this.contentTemplate} position={this.position} width={230} height={250} buttons={this.buttons} showProgressBar={true} 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 toastCreated(): void {
this.toastShow();
}
public toastShow() {
const value: number = parseInt((document.getElementById('timeOut') as HTMLInputElement).value, 0);
this.toastInstance.show({ timeOut: value });
}
public contentTemplate() {
return <p><img src='./laura.png'/></p>;
}
public render() {
return (
<div>
<div className='e-float-input'>
<input type='text' className='e-input' id='timeOut' defaultValue={'0'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">TimeOut</label>
</div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent id="elementToastTime" ref={toast => this.toastInstance = toast!} title="Anjolie Stokes" content={this.contentTemplate} position={this.position} width={230} height={250} buttons={this.buttons} showProgressBar={true} 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 toastCreated() {
toastShow();
}
function toastShow() {
const value = parseInt(document.getElementById('timeOut').value, 0);
toastInstance.show({ timeOut: value });
}
function contentTemplate() {
return <p><img src='./laura.png'/></p>;
}
return (<div>
<div className='e-float-input'>
<input type='text' className='e-input' id='timeOut' defaultValue={'0'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">TimeOut</label>
</div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent id="elementToastTime" ref={toast => toastInstance = toast} title="Anjolie Stokes" content={contentTemplate} position={position} width={230} height={250} buttons={buttons} showProgressBar={true} 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 toastCreated(): void {
toastShow();
}
function toastShow() {
const value: number = parseInt((document.getElementById('timeOut') as HTMLInputElement).value, 0);
toastInstance.show({ timeOut: value });
}
function contentTemplate() {
return <p><img src='./laura.png'/></p>;
}
return (
<div>
<div className='e-float-input'>
<input type='text' className='e-input' id='timeOut' defaultValue={'0'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">TimeOut</label>
</div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent id="elementToastTime" ref={toast => toastInstance = toast!} title="Anjolie Stokes" content={contentTemplate} position={position} width={230} height={250} buttons={buttons} showProgressBar={true} created={toastCreated.bind(this)} />
</div>
);
}
export default App;Static toasts
Create persistent toasts that do not automatically dismiss by setting the timeOut property to 0 (zero). Static toasts require explicit user action (close button click or programmatic removal) to dismiss. This pattern is ideal for critical alerts or action-required notifications where automatic dismissal would be inappropriate.
[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" } }
];
toastCreated() {
this.toastShow();
}
toastShow() {
const value = parseInt(document.getElementById('timeOut').value, 0);
this.toastInstance.show({ timeOut: value });
}
contentTemplate() {
return <p><img src='./laura.png'/></p>;
}
render() {
return (<div>
<div className='e-float-input'>
<input type='text' className='e-input' id='timeOut' defaultValue={'0'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">TimeOut</label>
</div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent id="elementToastTime" ref={toast => this.toastInstance = toast} title="Anjolie Stokes" content={this.contentTemplate} position={this.position} width={230} height={250} buttons={this.buttons} showProgressBar={true} 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 toastCreated(): void {
this.toastShow();
}
public toastShow() {
const value: number = parseInt((document.getElementById('timeOut') as HTMLInputElement).value, 0);
this.toastInstance.show({ timeOut: value });
}
public contentTemplate() {
return <p><img src='./laura.png'/></p>;
}
public render() {
return (
<div>
<div className='e-float-input'>
<input type='text' className='e-input' id='timeOut' defaultValue={'0'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">TimeOut</label>
</div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent id="elementToastTime" ref={toast => this.toastInstance = toast!} title="Anjolie Stokes" content={this.contentTemplate} position={this.position} width={230} height={250} buttons={this.buttons} showProgressBar={true} 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 toastCreated() {
toastShow();
}
function toastShow() {
const value = parseInt(document.getElementById('timeOut').value, 0);
toastInstance.show({ timeOut: value });
}
function contentTemplate() {
return <p><img src='./laura.png'/></p>;
}
return (<div>
<div className='e-float-input'>
<input type='text' className='e-input' id='timeOut' defaultValue={'0'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">TimeOut</label>
</div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent id="elementToastTime" ref={toast => toastInstance = toast} title="Anjolie Stokes" content={contentTemplate} position={position} width={230} height={250} buttons={buttons} showProgressBar={true} 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 toastCreated(): void {
toastShow();
}
function toastShow() {
const value: number = parseInt((document.getElementById('timeOut') as HTMLInputElement).value, 0);
toastInstance.show({ timeOut: value });
}
function contentTemplate() {
return <p><img src='./laura.png'/></p>;
}
return (
<div>
<div className='e-float-input'>
<input type='text' className='e-input' id='timeOut' defaultValue={'0'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">TimeOut</label>
</div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent id="elementToastTime" ref={toast => toastInstance = toast!} title="Anjolie Stokes" content={contentTemplate} position={position} width={230} height={250} buttons={buttons} showProgressBar={true} created={toastCreated.bind(this)} />
</div>
);
}
export default App;