Skip to main content

Toast

<ui5-toast> | Since 1.0.0-rc.6

The ui5-toast is a small, non-disruptive popup for success or information messages that disappears automatically after a few seconds.

Usage​

When to use:​

  • You want to display a short success or information message.
  • You do not want to interrupt users while they are performing an action.
  • You want to confirm a successful action.

When not to use:​

  • You want to display error or warning message.
  • You want to interrupt users while they are performing an action.
  • You want to make sure that users read the message before they leave the page.
  • You want users to be able to copy some part of the message text.

ES6 Module Import​

import "@ui5/webcomponents/dist/Toast.js";

Basic Sample​

Properties​

duration​

DescriptionDefines the duration in milliseconds for which component remains on the screen before it's automatically closed.
Note: The minimum supported value is 500 ms and even if a lower value is set, the duration would remain 500 ms.
Typenumber
Default3000

placement​

DescriptionDefines the placement of the component.
Type"TopStart" | "TopCenter" | "TopEnd" | "MiddleStart" | "MiddleCenter" | "MiddleEnd" | "BottomStart" | "BottomCenter" | "BottomEnd"
Default"BottomCenter"

open​

DescriptionIndicates whether the component is open (visible).
Typeboolean
Defaultfalse
Since2.0.0

Slots​

default​

DescriptionDefines the text of the component.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
TypeArray<Node>

Events​

close​

DescriptionFired after the component is auto closed.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Duration​

Placement​