ion-toast

shadow

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.

Presenting

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.

Controller

Inline

When using Ionic with React or Vue, ion-toast can also be placed directly in the template through use of the isOpen property. Note that isOpen must be set to false manually when the toast is dismissed; it will not be updated automatically.

React

import React, { useState } from 'react';
import { IonButton, IonToast } from '@ionic/react';

function Example() {
  const [showToast, setShowToast] = useState(false);

  return (
    <>
      <IonButton onClick={() => setShowToast(true)}>Show Toast</IonButton>
      <IonToast isOpen={showToast} onDidDismiss={() => setShowToast(false)} message="Hello World!" duration={1500} />
    </>
  );
}

Vue

<template>
  <ion-button @click="setOpen(true)">Show Toast</ion-button>
  <ion-toast :is-open="isOpenRef" @didDismiss="setOpen(false)" message="Hello World!" :duration="1500"></ion-toast>
</template>

<script lang="ts">
  import { IonButton, IonToast } from '@ionic/vue';
  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    components: { IonButton, IonToast },
    setup() {
      const isOpenRef = ref(false);
      const setOpen = (state: boolean) => (isOpenRef.value = state);

      return { isOpenRef, setOpen };
    },
  });
</script>

Dismissing

Toasts are intended to be subtle notifications and should not interrupt the user. As a result, user interaction should not be required to dismiss the toast.

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.

Pressing the hardware back button does not dismiss toasts since they are not supposed to interrupt the user.

The following example demonstrates how to use the buttons property to add a button that automatically dismisses the toast when clicked, as well as how to collect the role of the dismiss event.

Layout

Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the layout property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a side value of either start or end, but not both.

Icons

An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an Alert instead.

Theming

Interfaces

ToastButton

interface ToastButton {
  text?: string;
  icon?: string;
  side?: 'start' | 'end';
  role?: 'cancel' | string;
  cssClass?: string | string[];
  handler?: () => boolean | void | Promise<boolean | void>;
}

ToastOptions

interface ToastOptions {
  header?: string;
  message?: string | IonicSafeString;
  cssClass?: string | string[];
  duration?: number;
  buttons?: (ToastButton | string)[];
  position?: 'top' | 'bottom' | 'middle';
  translucent?: boolean;
  animated?: boolean;
  icon?: string;
  htmlAttributes?: { [key: string]: any };

  color?: Color;
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;

  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

Accessibility

Focus Management

Toasts are intended to be subtle notifications and are not intended to interrupt the user. User interaction should not be required to dismiss the toast. As a result, focus is not automatically moved to a toast when one is presented.

Screen Readers

ion-toast has aria-live="polite" and aria-atomic="true" set by default.

aria-live causes screen readers to announce the content of the toast when it is updated. However, since the attribute is set to 'polite', screen readers generally do not interrupt the current task. Developers can customize this behavior by using the htmlAttributes property to set aria-live to 'assertive'. This will cause screen readers to immediately notify the user when a toast is updated, potentially interrupting any previous updates.

aria-atomic="true" is set to ensure that the entire toast is announced as a single unit. This is useful when dynamically updating the content of the toast as it prevents screen readers from announcing only the content that has changed.

Tips

While this is not a complete list, here are some guidelines to follow when using toasts.

• Do not require user interaction to dismiss toasts. For example, having a "Dismiss" button in the toast is fine, but the toast should also automatically dismiss on its own after a timeout period. If you need user interaction for a notification, consider using ion-alert instead.

• Avoid opening multiple toasts in quick succession. If aria-live is set to 'assertive', screen readers may interrupt the reading of the current task to announce the new toast, causing the context of the previous toast to be lost.

• For toasts with long messages, consider adjusting the duration property to allow users enough time to read the content of the toast.

Properties

animated

Description	trueの場合、トーストはアニメーションします。
Attribute	animated
Type	boolean
Default	true

buttons

Description	トースト用のボタンがずらり。
Attribute	undefined
Type	(string ｜ ToastButton)[] ｜ undefined
Default	undefined

color

Description	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.
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	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
Default	undefined

duration

Description	How many milliseconds to wait before hiding the toast. By default, it will show until dismiss() is called.
Attribute	duration
Type	number
Default	config.getNumber('toastDuration', 0)

enterAnimation

Description	乾杯の音頭をとるときに使うアニメーションです。
Attribute	undefined
Type	((baseEl: any, opts?: any) => Animation) ｜ undefined
Default	undefined

header

Description	トーストに表示されるヘッダー。
Attribute	header
Type	string ｜ undefined
Default	undefined

htmlAttributes

Description	トーストに渡す追加の属性。
Attribute	undefined
Type	undefined ｜ { [key: string]: any; }
Default	undefined

icon

Description	The name of the icon to display, or the path to a valid SVG file. See ion-icon. https://ionic.io/ionicons
Attribute	icon
Type	string ｜ undefined
Default	undefined

keyboardClose

Description	trueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attribute	keyboard-close
Type	boolean
Default	false

layout

Description	Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
Attribute	layout
Type	"baseline" ｜ "stacked"
Default	'baseline'

leaveAnimation

Description	トーストの解散時に使用するアニメーションです。
Attribute	undefined
Type	((baseEl: any, opts?: any) => Animation) ｜ undefined
Default	undefined

message

Description	Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting innerHTMLTemplatesEnabled: false in the Ionic config.
Attribute	message
Type	IonicSafeString ｜ string ｜ undefined
Default	undefined

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

position

Description	画面上のトーストの位置です。
Attribute	position
Type	"bottom" ｜ "middle" ｜ "top"
Default	'bottom'

translucent

Description	If true, the toast will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attribute	translucent
Type	boolean
Default	false

Events

Name	Description
ionToastDidDismiss	トーストが解散した後に発行されます。
ionToastDidPresent	トーストが提示された後に発行されます。
ionToastWillDismiss	乾杯が解散する前に発行されます。
ionToastWillPresent	トーストが提示される前に発行されます。

Methods

dismiss

Description	トーストのオーバーレイが提示された後、それを解除します。
Signature	dismiss(data?: any, role?: string) => Promise<boolean>

onDidDismiss

Description	トーストが解散したことを解決するPromiseを返します。
Signature	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

Description	トーストが解散するタイミングを解決するPromiseを返します。
Signature	onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

Description	トーストのオーバーレイを作成した後に提示します。
Signature	present() => Promise<void>

CSS Shadow Parts

Name	Description
button	トーストの内側に表示される任意のボタン要素。
container	すべての子要素を包む要素。
header	乾杯のヘッダーテキストです。
icon	トーストの内容の横に表示されるアイコンです。
message	乾杯の音頭の本文です。

CSS Custom Properties

Name	Description
--background	乾杯の背景
--border-color	トーストのボーダーカラー
--border-radius	トーストのボーダー半径
--border-style	トーストのボーダースタイル
--border-width	トーストのボーダー幅
--box-shadow	乾杯の箱影
--button-color	ボタンテキストの色
--color	トーストの文字色
--end	方向が左から右の場合は右から、方向が右から左の場合は左から位置すること
--height	トーストの高さ
--max-height	トーストの最大の高さ
--max-width	トーストの最大幅
--min-height	トーストの最小の高さ
--min-width	トーストの最小幅
--start	方向が左から右の場合は左から、方向が右から左の場合は右から位置すること
--white-space	乾杯メッセージのホワイトスペース
--width	トーストの幅

Slots

No slots available for this component.