ion-toast
A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.
Creating
All of the toast options should be passed in the create method. The message to display should be passed in the
message
property. The showCloseButton
option can be set to true in order to display a close button on the toast. See the properties below for all available options.
Positioning
Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are
top
, bottom
and
middle
. If the position is not specified, the toast will be displayed at the bottom of the viewport.
Dismissing
The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the
duration
of the toast options. If showCloseButton
is set to true, then the close button will dismiss the toast. To dismiss the toast after creation, call the
dismiss()
method on the instance.
Usage
import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';
@Component({
selector: 'toast-example',
templateUrl: 'toast-example.html',
styleUrls: ['./toast-example.css'],
})
export class ToastExample {
constructor(public toastController: ToastController) {}
async presentToast() {
const toast = await this.toastController.create({
message: 'Your settings have been saved.',
duration: 2000
});
toast.present();
}
async presentToastWithOptions() {
const toast = await this.toastController.create({
header: 'Toast header',
message: 'Click to Close',
position: 'top',
buttons: [
{
side: 'start',
icon: 'star',
text: 'Favorite',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Done',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
toast.present();
}
}
async function presentToast() {
const toast = document.createElement('ion-toast');
toast.message = 'Your settings have been saved.';
toast.duration = 2000;
document.body.appendChild(toast);
return toast.present();
}
async function presentToastWithOptions() {
const toast = document.createElement('ion-toast');
toast.header = 'Toast header';
toast.message = 'Click to Close';
toast.position = 'top';
toast.buttons = [
{
side: 'start',
icon: 'star',
text: 'Favorite',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Done',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
];
document.body.appendChild(toast);
return toast.present();
}
import React, { useState } from 'react';
import { IonToast, IonContent, IonButton } from '@ionic/react';
export const ToastExample: React.FC = () => {
const [showToast1, setShowToast1] = useState(false);
const [showToast2, setShowToast2] = useState(false);
return (
<IonContent>
<IonButton onClick={() => setShowToast1(true)} expand="block">Show Toast 1</IonButton>
<IonButton onClick={() => setShowToast2(true)} expand="block">Show Toast 2</IonButton>
<IonToast
isOpen={showToast1}
onDidDismiss={() => setShowToast1(false)}
message="Your settings have been saved."
duration={200}
/>
<IonToast
isOpen={showToast2}
onDidDismiss={() => setShowToast2(false)}
message="Click to Close"
position="top"
buttons={[
{
side: 'start',
icon: 'star',
text: 'Favorite',
handler: () => {
console.log('Favorite clicked');
}
},
{
text: 'Done',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]}
/>
</IonContent>
);
};
Properties
animated | |
---|---|
Description | If |
Attribute | animated |
Type | boolean |
Default | true |
buttons | |
Description | An array of buttons for the toast. |
Type | (string | ToastButton)[] | undefined |
closeButtonText | |
Description | |
Attribute | close-button-text |
Type | string | undefined |
color | |
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
cssClass | |
Description | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. |
Attribute | css-class |
Type | string | string[] | undefined |
duration | |
Description | How many milliseconds to wait before hiding the toast. By default, it will show
until
|
Attribute | duration |
Type | number |
Default | 0 |
enterAnimation | |
Description | Animation to use when the toast is presented. |
Type | ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined |
header | |
Description | Header to be shown in the toast. |
Attribute | header |
Type | string | undefined |
keyboardClose | |
Description | If |
Attribute | keyboard-close |
Type | boolean |
Default | false |
leaveAnimation | |
Description | Animation to use when the toast is dismissed. |
Type | ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined |
message | |
Description | Message to be shown in the toast. |
Attribute | message |
Type | string | undefined |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
position | |
Description | The position of the toast on the screen. |
Attribute | position |
Type | "bottom" | "middle" | "top" |
Default | 'bottom' |
showCloseButton | |
Description | |
Attribute | show-close-button |
Type | boolean |
Default | false |
translucent | |
Description | If |
Attribute | translucent |
Type | boolean |
Default | false |
Events
Name | Description |
---|---|
ionToastDidDismiss | Emitted after the toast has dismissed. |
ionToastDidPresent | Emitted after the toast has presented. |
ionToastWillDismiss | Emitted before the toast has dismissed. |
ionToastWillPresent | Emitted before the toast has presented. |
Methods
dismiss | |
---|---|
Description | Dismiss the toast overlay after it has been presented. |
Signature | dismiss(data?: any, role?: string | undefined) => Promise<boolean> |
onDidDismiss | |
Description | Returns a promise that resolves when the toast did dismiss. |
Signature | onDidDismiss() => Promise<OverlayEventDetail<any>> |
onWillDismiss | |
Description | Returns a promise that resolves when the toast will dismiss. |
Signature | onWillDismiss() => Promise<OverlayEventDetail<any>> |
present | |
Description | Present the toast overlay after it has been created. |
Signature | present() => Promise<void> |
CSS Custom Properties
Name | Description |
---|---|
--background | Background of the toast |
--border-color | Border color of the toast |
--border-radius | Border radius of the toast |
--border-style | Border style of the toast |
--border-width | Border width of the toast |
--box-shadow | Box shadow of the toast |
--button-color | Color of the button text |
--color | Color of the toast text |
--end | Position from the right if direction is left-to-right, and from the left if direction is right-to-left |
--height | Height of the toast |
--max-height | Maximum height of the toast |
--max-width | Maximum width of the toast |
--min-height | Minimum height of the toast |
--min-width | Minimum width of the toast |
--start | Position from the left if direction is left-to-right, and from the right if direction is right-to-left |
--width | Width of the toast |