Toasts

Toasts display information and disappear automatically after two seconds. They’re useful when you want to show simple and short bites of information. For more important messages, use a pop-up that requires confirmation. Using a graphic toast can help users understand information more easily.

Usage

You can use toasts to show the result of noncritical actions and provide simple information on the app’s current status.

Behavior

  • Automatic expiration

    Toasts do not require user confirmation. They automatically expire after a two-second timeout. Users can tap the screen to close a toast before it disappears automatically.

  • No scrolling

    Toasts don’t allow scrolling. If you have long text that doesn’t fit on one screen, use a confirmation pop-up instead.

Types

  • Graphic toasts

    A graphic toast displays an icon or an icon with short text. You can provide up to two lines of text below the icon. Keep this text as short and simple as possible; for example, Photo deleted, Message sent, or Update shared. You can use a common set to minimize fragmentation or use your own customized icon to express your app’s identity.

    Graphic toast pop-up in developer’s guides

    Native

    Pop-up > toast/circle

    (+ Displayed with an icon)

    Web

    -

    A graphic toast indicates a success/failure of an operation with a corresponding icon (V/X).

  • Text toasts

    A text toast is useful when it’s difficult to convey a message with an image. The text can be up to three lines long.

    Text toast pop-up in developer's guides

    Native

    Pop-up > toast/circle

    Web

    Pop-up > toast

    A text toast is useful when it’s difficult to convey a message with an image. The text can be up to three lines long.

    A text toast communicates simple information that is hard to express with an image.

  • Small toasts

    You can provide a small toast, which only covers the bottom of the screen. For text toasts, a maximum of two lines can be displayed. For graphic toasts, a maximum of one line can be provided.

    Small toast pop-up in developer's guides

    Native

    toast/small/circle

    Web

    -