Skip to main content

ion-toast

View Source

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.

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 a button with a role of "cancel" is added, then that 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');
}
}
]
});
await toast.present();
const { role } = await toast.onDidDismiss();
console.log('onDidDismiss resolved with role', role);
}
}

Properties#

animated#

DescriptionIf true, the toast will animate.
Attributeanimated
Typeboolean
Defaulttrue

buttons#

DescriptionAn array of buttons for the toast.
Attributeundefined
Type(string \| ToastButton)[] \| undefined
Defaultundefined

color#

DescriptionThe color to use from your application's color palette.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information on colors, see theming.
Attributecolor
Typestring \| undefined
Defaultundefined

cssClass#

DescriptionAdditional classes to apply for custom CSS. If multiple classes are
provided they should be separated by spaces.
Attributecss-class
Typestring \| string[] \| undefined
Defaultundefined

duration#

DescriptionHow many milliseconds to wait before hiding the toast. By default, it will show
until dismiss() is called.
Attributeduration
Typenumber
Default0

enterAnimation#

DescriptionAnimation to use when the toast is presented.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) \| undefined
Defaultundefined

header#

DescriptionHeader to be shown in the toast.
Attributeheader
Typestring \| undefined
Defaultundefined

keyboardClose#

DescriptionIf true, the keyboard will be automatically dismissed when the overlay is presented.
Attributekeyboard-close
Typeboolean
Defaultfalse

leaveAnimation#

DescriptionAnimation to use when the toast is dismissed.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) \| undefined
Defaultundefined

message#

DescriptionMessage to be shown in the toast.
Attributemessage
TypeIonicSafeString \| string \| undefined
Defaultundefined

mode#

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" \| "md"
Defaultundefined

position#

DescriptionThe position of the toast on the screen.
Attributeposition
Type"bottom" \| "middle" \| "top"
Default'bottom'

translucent#

DescriptionIf true, the toast will be translucent.
Only applies when the mode is "ios" and the device supports
backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

Events#

NameDescription
ionToastDidDismissEmitted after the toast has dismissed.
ionToastDidPresentEmitted after the toast has presented.
ionToastWillDismissEmitted before the toast has dismissed.
ionToastWillPresentEmitted before the toast has presented.

Methods#

dismiss#

DescriptionDismiss the toast overlay after it has been presented.
Signaturedismiss(data?: any, role?: string \| undefined) => Promise<boolean>

onDidDismiss#

DescriptionReturns a promise that resolves when the toast did dismiss.
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss#

DescriptionReturns a promise that resolves when the toast will dismiss.
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present#

DescriptionPresent the toast overlay after it has been created.
Signaturepresent() => Promise<void>

CSS Shadow Parts#

NameDescription
buttonAny button element that is displayed inside of the toast.
containerThe element that wraps all child elements.
headerThe header text of the toast.
messageThe body text of the toast.

CSS Custom Properties#

NameDescription
--backgroundBackground of the toast
--border-colorBorder color of the toast
--border-radiusBorder radius of the toast
--border-styleBorder style of the toast
--border-widthBorder width of the toast
--box-shadowBox shadow of the toast
--button-colorColor of the button text
--colorColor of the toast text
--endPosition from the right if direction is left-to-right, and from the left if direction is right-to-left
--heightHeight of the toast
--max-heightMaximum height of the toast
--max-widthMaximum width of the toast
--min-heightMinimum height of the toast
--min-widthMinimum width of the toast
--startPosition from the left if direction is left-to-right, and from the right if direction is right-to-left
--white-spaceWhite space of the toast message
--widthWidth of the toast