Overview

A message toast is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.

When to Use

1
do
false

Recommended

  • To display a short success message.
  • To avoid interruption while users are performing an action.
  • To confirm a successful action.
1
dont
false

Not Recommended

  • To display an error or warning message.
  • To interrupt users while they are performing an action.
  • To make sure that users read the message before they leave the page.
  • To copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.

Layout

Position

The message toast is always centered horizontally at the bottom of the screen.

Anatomy

We recommend setting it to no more than 35 rem. For longer success messages, adjust the width of the toast to make the message easy to read (for example, on a desktop device).

See also:

Fiori Design Guideline - Message Toast

UI5 DemoKit Sample - MessageToast