Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

ToastController

Improve this doc

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 first argument of the create method: create(opts). 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 create method below for all available options.

Positioning

Toasts can be positioned at the top, bottom or middle of the view port. The position can be passed to the Toast.create(opts) method. The position option is a string, and the values accepted are top, bottom and middle. If the position is not specified, the toast will be displayed at the bottom of the view port.

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 Toast instance. The onDidDismiss function can be called to perform an action after the toast is dismissed.

Usage

constructor(private toastCtrl: ToastController) {

}

presentToast() {
  let toast = this.toastCtrl.create({
    message: 'User was added successfully',
    duration: 3000,
    position: 'top'
  });

  toast.onDidDismiss(() => {
    console.log('Dismissed toast');
  });

  toast.present();
}

Instance Members

config

create(opts)

Create a new toast component. See options below

Param Type Details
opts ToastOptions

Toast options. See the below table for available options.

Advanced

Property Type Default Description
message string - The message for the toast. Long strings will wrap and the toast container will expand.
duration number - How many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called.
position string "bottom" The position of the toast on the screen. Accepted values: "top", "middle", "bottom".
cssClass string - Additional classes for custom styles, separated by spaces.
showCloseButton boolean false Whether or not to show a button to close the toast.
closeButtonText string "Close" Text to display in the close button.
dismissOnPageChange boolean false Whether to dismiss the toast when navigating to a new page.

Sass Variables

Property Default Description
$toast-width 100%

Width of the toast

$toast-max-width 700px

Max width of the toast

Property Default Description
$toast-ios-background rgba(0, 0, 0, .9)

Background of the toast wrapper

$toast-ios-border-radius .65rem

Border radius of the toast wrapper

$toast-ios-title-color #fff

Color of the toast title

$toast-ios-title-font-size 1.4rem

Font size of the toast title

$toast-ios-title-padding-top 1.5rem

Padding top of the toast title

$toast-ios-title-padding-end $toast-ios-title-padding-top

Padding end of the toast title

$toast-ios-title-padding-bottom $toast-ios-title-padding-top

Padding bottom of the toast title

$toast-ios-title-padding-start $toast-ios-title-padding-end

Padding start of the toast title

Property Default Description
$toast-md-background #333

Background of the toast wrapper

$toast-md-title-color #fff

Color of the toast title

$toast-md-title-font-size 1.5rem

Font size of the toast title

$toast-md-title-padding-top 19px

Padding top of the toast title

$toast-md-title-padding-end 16px

Padding end of the toast title

$toast-md-title-padding-bottom 17px

Padding bottom of the toast title

$toast-md-title-padding-start $toast-md-title-padding-end

Padding start of the toast title

Property Default Description
$toast-wp-background rgba(0, 0, 0, 1)

Background of the toast wrapper

$toast-wp-border-radius 0

Border radius of the toast wrapper

$toast-wp-button-color #fff

Color of the toast button

$toast-wp-title-color #fff

Color of the toast title

$toast-wp-title-font-size 1.4rem

Font size of the toast title

$toast-wp-title-padding-top 1.5rem

Padding top of the toast title

$toast-wp-title-padding-end $toast-wp-title-padding-top

Padding end of the toast title

$toast-wp-title-padding-bottom $toast-wp-title-padding-top

Padding bottom of the toast title

$toast-wp-title-padding-start $toast-wp-title-padding-end

Padding start of the toast title

API

Native

General