Overlays

Overlays are handled by the overlay.Container component which has to be embedded into your root component.

Every page or component that creates overlays has to embed the overlay.OverlayContainerRef structure. Your wiring function also needs to set the reference to your overlay.Container that you have placed in your root component.

Modals

A simple requester modal is already contained in the overlay package. Use it with:

Open simple modal

Toasts

A simple toast with an icon slot and custom color setting can be found in the overlay package. Use it with:

Open simple toast Open warning toast

A shorter version of this is overlay.ToastMessage which only accepts a message text and a message type which is one of

overlay.ToastMessageTypeSuccess
overlay.ToastMessageTypeAttention
overlay.ToastMessageTypeCaution
overlay.ToastMessageTypeCritical

Open message toast

To let the toast close itself after some time, you can use the Duration option:

Open self closing message toast

Wait/Load overlay

For actions that take a bit longer you can show the wait overlay:

Do some action that takes time