Framework v4 BETA

ion-toast

Open Preview

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

angular javascript
typescript
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({
      message: 'Click to Close',
      showCloseButton: true,
      position: 'top',
      closeButtonText: 'Done'
    });
    toast.present();
  }

}
javascript
async function presentToast() {
  const toastController = document.querySelector('ion-toast-controller');
  await toastController.componentOnReady();

  const toast = await toastController.create({
    message: 'Your settings have been saved.',
    duration: 2000
  });
  return await toast.present();
}

async function presentToastWithOptions() {
  const toastController = document.querySelector('ion-toast-controller');
  await toastController.componentOnReady();

  const toast = await toastController.create({
    message: 'Click to Close',
    showCloseButton: true,
    position: 'top',
    closeButtonText: 'Done'
  });
  return await toast.present();
}

Properties

animated

Attribute: animated Type: boolean
If true, the toast will animate.

closeButtonText

Attribute: close-button-text Type: string | undefined
Text to display in the close button.

color

Attribute: color Type: string | undefined
The 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.

cssClass

Attribute: css-class Type: string | string[] | undefined
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.

duration

Attribute: duration Type: number
How many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called.

enterAnimation

Attribute: enter-animation Type: AnimationBuilder | undefined
Animation to use when the toast is presented.

keyboardClose

Attribute: keyboard-close Type: boolean
If true, the keyboard will be automatically dismissed when the overlay is presented.

leaveAnimation

Attribute: leave-animation Type: AnimationBuilder | undefined
Animation to use when the toast is dismissed.

message

Attribute: message Type: string | undefined
Message to be shown in the toast.

mode

Attribute: mode Type: "ios" | "md"
The mode determines which platform styles to use.

overlayIndex

Attribute: overlay-index Type: number

position

Attribute: position Type: "bottom" | "middle" | "top"
The position of the toast on the screen.

showCloseButton

Attribute: show-close-button Type: boolean
If true, the close button will be displayed.

translucent

Attribute: translucent Type: boolean
If true, the toast will be translucent.

Events

ionToastDidDismiss

Emitted after the toast has dismissed.

ionToastDidLoad

Emitted after the toast has loaded.

ionToastDidPresent

Emitted after the toast has presented.

ionToastDidUnload

Emitted after the toast has unloaded.

ionToastWillDismiss

Emitted before the toast has dismissed.

ionToastWillPresent

Emitted before the toast has presented.

Methods

dismiss()

Dismiss the toast overlay after it has been presented.

onDidDismiss()

Returns a promise that resolves when the toast did dismiss.

onWillDismiss()

Returns a promise that resolves when the toast will dismiss.

present()

Present the toast overlay after it has been created.

CSS Custom Properties

Name Description
--background Background of the toast
--button-color Color of the button text
--color Color of the toast text