How can I help you?
Toast position
20 Feb 202624 minutes to read
Configure where toasts appear on the screen using predefined positions or custom coordinate values. Position settings determine toast placement relative to the viewport or target container, affecting user attention and notification visibility.
Predefined positions
Toast supports nine predefined position combinations using the position property:
Horizontal alignment (X):
- Left - Aligns toast to the left edge
- Center - Centers toast horizontally
- Right - Aligns toast to the right edge
Vertical alignment (Y):
- Top - Positions toast at the top
- Bottom - Positions toast at the bottom
Combine X and Y values to create position combinations (e.g., Top-Left, Center-Bottom).
Note: When multiple toasts display simultaneously, position changes only apply to newly displayed toasts. Existing toasts retain their original positions until dismissed. If toast width is set to 100%, X position values have no effect.
Custom positions
For non-standard positioning, specify custom X and Y coordinates using pixels, numbers, or percentages. Numeric values are interpreted as pixels, while percentage values calculate relative to the container. Custom positioning provides precise control over toast placement for specialized layouts or responsive requirements.
[Class-component]
import { ButtonComponent, RadioButtonComponent } 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;
customFlag;
checkboxObj;
dropDownInstance;
radioInstance1;
radioInstance;
radioInstance2;
radioInstance3;
timeOutDelay = 600;
dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center'];
constructor(props) {
super(props);
this.state = {
position: { X: 'Center', Y: "Bottom" },
target: document.body,
width: 300
};
}
toastCreated() {
this.toastShow(600);
}
toastShow(timeOutDelay) {
setTimeout(() => {
this.toastInstance.show();
}, timeOutDelay);
}
valueChange(e) {
this.toastInstance.hide('All');
this.setToastPosValue(e.value);
this.toastShow(1000);
}
radioChange(e) {
if (this.radioInstance.element.checked) {
this.toastInstance.hide('All');
document.getElementById('dropdownChoose').style.display = 'table-cell';
document.getElementById('customChoose').style.display = 'none';
this.setToastPosValue(this.dropDownInstance.value.toString());
this.customFlag = true;
this.toastShow(1000);
}
}
radioChange3(e) {
if (this.radioInstance3.element.checked) {
this.toastInstance.hide('All');
this.setState({ target: document.body });
this.toastShow(1000);
}
}
radioChange2(e) {
if (this.radioInstance2.element.checked) {
this.toastInstance.hide('All');
this.setState({ target: '#toast_pos_target' });
this.toastShow(1000);
}
}
radioChange1(e) {
if (this.radioInstance1.element.checked) {
this.toastInstance.hide('All');
document.getElementById('dropdownChoose').style.display = 'none';
document.getElementById('customChoose').style.display = 'table-cell';
this.setCustomPosValue();
this.customFlag = true;
this.toastShow(1000);
}
}
setCustomPosValue() {
this.setState({
position: {
X: parseInt(document.getElementById('xPos').value, 10),
Y: parseInt(document.getElementById('yPos').value, 10)
}
});
}
setToastPosValue(value) {
value = value.toLowerCase().replace(' ', '');
switch (value) {
case 'topleft':
this.setState({ position: { X: 'Left', Y: 'Top' } });
break;
case 'topright':
this.setState({ position: { X: 'Right', Y: 'Top' } });
break;
case 'topcenter':
this.setState({ position: { X: 'Center', Y: 'Top' } });
break;
case 'topfullwidth':
this.setState({ position: { X: 'Center', Y: 'Top' }, width: '100%' });
break;
case 'bottomleft':
this.setState({ position: { X: 'Left', Y: 'Bottom' } });
break;
case 'bottomright':
this.setState({ position: { X: 'Right', Y: 'Bottom' } });
break;
case 'bottomcenter':
this.setState({ position: { X: 'Center', Y: 'Bottom' } });
break;
case 'bottomfullwidth':
this.setState({ position: { X: 'Center', Y: 'Bottom' }, width: '100%' });
break;
}
}
render() {
return (<div id="toast_pos_target">
<div id="toast_full_Position" className='row'>
<table>
<tbody>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance = custom} checked={true} label='Position' name="position" change={this.radioChange = this.radioChange.bind(this)}/>
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance1 = custom} label='Custom' name="position" change={this.radioChange1 = this.radioChange1.bind(this)}/>
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colSpan={2}>
<div>
<DropDownListComponent ref={drop => this.dropDownInstance = drop} id="ddlelement" dataSource={this.dropdownDB} placeholder="Select a Position" change={this.valueChange = this.valueChange.bind(this)} index='4'/>
</div>
</td>
</tr>
<tr>
<td id='customChoose'>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='xPos' defaultValue={'50'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">X Position</label>
</div>
</div>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='yPos' defaultValue={'50'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">Y Position</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance2 = custom} checked={true} label='Target' name="toast" change={this.radioChange2 = this.radioChange2.bind(this)}/>
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance3 = custom} checked={true} label='Global' name="toast" change={this.radioChange3 = this.radioChange3.bind(this)}/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this, 500)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => this.toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" target={this.state.target} width={this.state.width} position={this.state.position} created={this.toastCreated = this.toastCreated.bind(this)}/>
</div>);
}
}
;
export default App;import { ButtonComponent, CheckBoxComponent, RadioButtonComponent } 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 customFlag: boolean;
public checkboxObj: CheckBoxComponent;
public dropDownInstance: DropDownListComponent;
public radioInstance1: RadioButtonComponent;
public radioInstance: RadioButtonComponent;
public radioInstance2: RadioButtonComponent;
public radioInstance3: RadioButtonComponent;
public timeOutDelay: number = 600;
public dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center'];
constructor(props: any) {
super(props);
this.state = {
position: { X: 'Center', Y: "Bottom" },
target: document.body,
width: 300
}
}
public toastCreated(): void {
this.toastShow(600);
}
public toastShow(timeOutDelay: number) {
setTimeout(
() => {
this.toastInstance.show();
}, timeOutDelay);
}
public valueChange(e: any): void {
this.toastInstance.hide('All');
this.setToastPosValue(e.value);
this.toastShow(1000);
}
public radioChange(e: any): void {
if (this.radioInstance.element.checked) {
this.toastInstance.hide('All');
(document.getElementById('dropdownChoose') as HTMLElement).style.display = 'table-cell';
(document.getElementById('customChoose') as HTMLElement).style.display = 'none';
this.setToastPosValue(this.dropDownInstance.value.toString());
this.customFlag = true;
this.toastShow(1000);
}
}
public radioChange3(e: any): void {
if (this.radioInstance3.element.checked) {
this.toastInstance.hide('All');
this.setState({ target: document.body });
this.toastShow(1000);
}
}
public radioChange2(e: any): void {
if (this.radioInstance2.element.checked) {
this.toastInstance.hide('All');
this.setState({ target: '#toast_pos_target' });
this.toastShow(1000);
}
}
public radioChange1(e: any): void {
if (this.radioInstance1.element.checked) {
this.toastInstance.hide('All');
(document.getElementById('dropdownChoose') as HTMLElement).style.display = 'none';
(document.getElementById('customChoose') as HTMLElement).style.display = 'table-cell';
this.setCustomPosValue();
this.customFlag = true;
this.toastShow(1000);
}
}
public setCustomPosValue(): void {
this.setState({
position: {
X: parseInt((document.getElementById('xPos') as HTMLInputElement).value, 10),
Y: parseInt((document.getElementById('yPos') as HTMLInputElement).value, 10)
}
});
}
public setToastPosValue(value: string): void {
value = value.toLowerCase().replace(' ', '');
switch (value) {
case 'topleft':
this.setState({ position: { X: 'Left', Y: 'Top' } });
break;
case 'topright':
this.setState({ position: { X: 'Right', Y: 'Top' } });
break;
case 'topcenter':
this.setState({ position: { X: 'Center', Y: 'Top' } });
break;
case 'topfullwidth':
this.setState({ position: { X: 'Center', Y: 'Top' }, width: '100%' });
break;
case 'bottomleft':
this.setState({ position: { X: 'Left', Y: 'Bottom' } });
break;
case 'bottomright':
this.setState({ position: { X: 'Right', Y: 'Bottom' } });
break;
case 'bottomcenter':
this.setState({ position: { X: 'Center', Y: 'Bottom' } });
break;
case 'bottomfullwidth':
this.setState({ position: { X: 'Center', Y: 'Bottom' }, width: '100%' });
break;
}
}
public render() {
return (
<div id="toast_pos_target">
<div id="toast_full_Position" className='row'>
<table>
<tbody>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance = custom!} checked={true} label='Position' name="position" change={this.radioChange = this.radioChange.bind(this)} />
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance1 = custom!} label='Custom' name="position" change={this.radioChange1 = this.radioChange1.bind(this)} />
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colSpan={2}>
<div>
<DropDownListComponent ref={drop => this.dropDownInstance = drop!} id="ddlelement" dataSource={this.dropdownDB} placeholder="Select a Position" change={this.valueChange = this.valueChange.bind(this)} index='4' />
</div>
</td>
</tr>
<tr>
<td id='customChoose'>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='xPos' defaultValue={'50'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">X Position</label>
</div>
</div>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='yPos' defaultValue={'50'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">Y Position</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance2 = custom!} checked={true} label='Target' name="toast" change={this.radioChange2 = this.radioChange2.bind(this)} />
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => this.radioInstance3 = custom!} checked={true} label='Global' name="toast" change={this.radioChange3 = this.radioChange3.bind(this)} />
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this, 500)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => this.toastInstance = toast!} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" target={this.state.target} width={this.state.width} position={this.state.position} created={this.toastCreated = this.toastCreated.bind(this)} />
</div>
);
}
};
export default App;[Functional-component]
import { ButtonComponent, RadioButtonComponent } 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(position, target, width) {
let toastInstance;
let customFlag;
let checkboxObj;
let dropDownInstance;
let radioInstance1;
let radioInstance;
let radioInstance2;
let radioInstance3;
let timeOutDelay = 600;
let dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center'];
const [state1, setStatus1] = React.useState({ position: { X: 'Center', Y: "Bottom" } });
const [state2, setStatus2] = React.useState({ target: document.body });
const [state3, setStatus3] = React.useState({ width: '300' });
function toastCreated() {
toastShow(600);
}
function toastShow(timeOutDelay) {
setTimeout(() => {
toastInstance.show();
}, timeOutDelay);
}
function valueChange(e) {
toastInstance.hide('All');
setToastPosValue(e.value);
toastShow(1000);
}
function radioChange(e) {
if (radioInstance.element.checked) {
toastInstance.hide('All');
document.getElementById('dropdownChoose').style.display = 'table-cell';
document.getElementById('customChoose').style.display = 'none';
setToastPosValue(dropDownInstance.value.toString());
customFlag = true;
toastShow(1000);
}
}
function radioChange3(e) {
if (radioInstance3.element.checked) {
toastInstance.hide('All');
setStatus2({ target: document.body });
toastShow(1000);
}
}
function radioChange2(e) {
if (radioInstance2.element.checked) {
toastInstance.hide('All');
setStatus2({ target: '#toast_pos_target' });
toastShow(1000);
}
}
function radioChange1(e) {
if (radioInstance1.element.checked) {
toastInstance.hide('All');
document.getElementById('dropdownChoose').style.display = 'none';
document.getElementById('customChoose').style.display = 'table-cell';
setCustomPosValue();
customFlag = true;
toastShow(1000);
}
}
function setCustomPosValue() {
setStatus1({
position: {
X: parseInt(document.getElementById('xPos').value),
Y: parseInt(document.getElementById('yPos').value)
}
});
}
function setToastPosValue(value) {
value = value.toLowerCase().replace(' ', '');
switch (value) {
case 'topleft':
setStatus1({ position: { X: 'Left', Y: 'Top' } });
break;
case 'topright':
setStatus1({ position: { X: 'Right', Y: 'Top' } });
break;
case 'topcenter':
setStatus1({ position: { X: 'Center', Y: 'Top' } });
break;
case 'topfullwidth':
setStatus1({ position: { X: 'Center', Y: 'Top' } });
setStatus3({ width: '100%' });
break;
case 'bottomleft':
setStatus1({ position: { X: 'Left', Y: 'Bottom' } });
break;
case 'bottomright':
setStatus1({ position: { X: 'Right', Y: 'Bottom' } });
break;
case 'bottomcenter':
setStatus1({ position: { X: 'Center', Y: 'Bottom' } });
break;
case 'bottomfullwidth':
setStatus1({ position: { X: 'Center', Y: 'Bottom' } });
setStatus3({ width: '100%' });
break;
}
}
return (<div id="toast_pos_target">
<div id="toast_full_Position" className='row'>
<table>
<tbody>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance = custom} checked={true} label='Position' name="position" change={radioChange.bind(this)}/>
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance1 = custom} label='Custom' name="position" change={radioChange1.bind(this)}/>
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colSpan={2}>
<div>
<DropDownListComponent ref={drop => dropDownInstance = drop} id="ddlelement" dataSource={dropdownDB} placeholder="Select a Position" change={valueChange.bind(this)} index={4}/>
</div>
</td>
</tr>
<tr>
<td id='customChoose'>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='xPos' defaultValue={'50'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">X Position</label>
</div>
</div>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='yPos' defaultValue={'50'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">Y Position</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance2 = custom} checked={true} label='Target' name="toast" change={radioChange2.bind(this)}/>
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance3 = custom} checked={true} label='Global' name="toast" change={radioChange3.bind(this)}/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this, 500)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" target={state2.target} width={state3.width} position={state1.position} created={toastCreated.bind(this)}/>
</div>);
}
export default App;import { ButtonComponent, CheckBoxComponent, RadioButtonComponent } 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(position: any, target: any, width: any){
let toastInstance: ToastComponent;
let customFlag: boolean;
let checkboxObj: CheckBoxComponent;
let dropDownInstance: DropDownListComponent;
let radioInstance1: RadioButtonComponent;
let radioInstance: RadioButtonComponent;
let radioInstance2: RadioButtonComponent;
let radioInstance3: RadioButtonComponent;
let timeOutDelay: number = 600;
let dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center'];
const [state1, setStatus1] = React.useState({position: { X: 'Center', Y: "Bottom" }});
const [state2, setStatus2] = React.useState({target: document.body});
const [state3, setStatus3] = React.useState({width: '300'});
function toastCreated(): void {
toastShow(600);
}
function toastShow(timeOutDelay: number) {
setTimeout(
() => {
toastInstance.show();
}, timeOutDelay);
}
function valueChange(e: any): void {
toastInstance.hide('All');
setToastPosValue(e.value);
toastShow(1000);
}
function radioChange(e: any): void {
if (radioInstance.element.checked) {
toastInstance.hide('All');
(document.getElementById('dropdownChoose') as HTMLElement).style.display = 'table-cell';
(document.getElementById('customChoose') as HTMLElement).style.display = 'none';
setToastPosValue(dropDownInstance.value.toString());
customFlag = true;
toastShow(1000);
}
}
function radioChange3(e: any): void {
if (radioInstance3.element.checked) {
toastInstance.hide('All');
setStatus2({ target: document.body });
toastShow(1000);
}
}
function radioChange2(e: any): void {
if (radioInstance2.element.checked) {
toastInstance.hide('All');
setStatus2({ target: '#toast_pos_target'});
toastShow(1000);
}
}
function radioChange1(e: any): void {
if (radioInstance1.element.checked) {
toastInstance.hide('All');
(document.getElementById('dropdownChoose') as HTMLElement).style.display = 'none';
(document.getElementById('customChoose') as HTMLElement).style.display = 'table-cell';
setCustomPosValue();
customFlag = true;
toastShow(1000);
}
}
function setCustomPosValue(): void {
setStatus1({
position: {
X: parseInt((document.getElementById('xPos') as HTMLInputElement).value),
Y: parseInt((document.getElementById('yPos') as HTMLInputElement).value)
}
});
}
function setToastPosValue(value: string): void {
value = value.toLowerCase().replace(' ', '');
switch (value) {
case 'topleft':
setStatus1({ position: { X: 'Left', Y: 'Top' } });
break;
case 'topright':
setStatus1({ position: { X: 'Right', Y: 'Top' } });
break;
case 'topcenter':
setStatus1({ position: { X: 'Center', Y: 'Top' } });
break;
case 'topfullwidth':
setStatus1({ position: { X: 'Center', Y: 'Top' }});
setStatus3({width: '100%' });
break;
case 'bottomleft':
setStatus1({ position: { X: 'Left', Y: 'Bottom' } });
break;
case 'bottomright':
setStatus1({ position: { X: 'Right', Y: 'Bottom' } });
break;
case 'bottomcenter':
setStatus1({ position: { X: 'Center', Y: 'Bottom' } });
break;
case 'bottomfullwidth':
setStatus1({ position: { X: 'Center', Y: 'Bottom' }});
setStatus3({width: '100%' });
break;
}
}
return (
<div id="toast_pos_target">
<div id="toast_full_Position" className='row'>
<table>
<tbody>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance = custom!} checked={true} label='Position' name="position" change={radioChange.bind(this)} />
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance1 = custom!} label='Custom' name="position" change={radioChange1.bind(this)} />
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colSpan={2}>
<div>
<DropDownListComponent ref={drop => dropDownInstance = drop!} id="ddlelement" dataSource={dropdownDB} placeholder="Select a Position" change={valueChange.bind(this)} index={4} />
</div>
</td>
</tr>
<tr>
<td id='customChoose'>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='xPos' defaultValue={'50'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">X Position</label>
</div>
</div>
<div className='e-row'>
<div className='e-float-input'>
<input type='text' className='e-input' id='yPos' defaultValue={'50'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">Y Position</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance2 = custom!} checked={true} label='Target' name="toast" change={radioChange2.bind(this)} />
</div>
</td>
<td>
<div>
<RadioButtonComponent ref={custom => radioInstance3 = custom!} checked={true} label='Global' name="toast" change={radioChange3.bind(this)} />
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this, 500)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => toastInstance = toast!} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" target={state2.target} width={state3.width} position={state1.position} created={toastCreated.bind(this)} />
</div>
);
}
export default App;