Description & Source Code

A toast is a notification message which can be stacked. If multiple toasts are sent, the newest toast is displayed on top, and the previous toast stack is pushed down.

A simple toast is displayed in the middle-top side of the screen, and fade out after 5 seconds. Multiple simple toasts will stack.
A closable toast doesn't fade, but stays in the toast stack until the user clicks the close button.
A custom toast can have a different positions. It can also receive a different icon, or set a custom fade out delay.

	.z-toast-position {
	    z-index: 20;
	<vlayout apply="demo.popup.toast.ToastComposer" vflex="min">
		<div style="padding-bottom: 15px; padding-top:15px;">
			<button label="Simple toast" id="toastBtn" />
		<vlayout style="padding-top: 15px; padding-bottom: 15px;">
				<label value="Complex toast type: "/>
				<radiogroup id="rgType">
					<radio label="info" selected="true"/>
					<radio label="warning"/>
					<radio label="error"/>
			<button label="Closable toast" id="toastCloseBtn" />
		<vlayout style="padding-top: 15px;">
				<label value="Complex toast position: "/>
				<radiogroup id="rgPosition">
					<radio label="left"/>
					<radio label="right" selected="true"/>
			<button label="Toast position" id="toastPositionBtn" />
package demo.popup.toast;

import org.zkoss.zk.ui.Component;
import org.zkoss.zkmax.ui.util.Toast;
import org.zkoss.zul.Radiogroup;
import org.zkoss.zul.Textbox;

public class ToastComposer extends SelectorComposer<Component> {

	private Textbox target;
	private Radiogroup rgType;
	private Radiogroup rgPosition;

	public void doAfterCompose(Component comp) throws Exception {

	@Listen("onClick = #toastBtn")
	public void toastBtnClick() {"You have been toasted");

	@Listen("onClick = #toastCloseBtn")
	public void toastCloseBtnClick() {"This toast is closable", rgType.getSelectedItem().getLabel(), null, 0, true);

	@Listen("onClick = #toastPositionBtn")
	public void toastCustomBtnClick() {"This toast is closable", rgType.getSelectedItem().getLabel(),
				"middle_" + rgPosition.getSelectedItem().getLabel(), 2000, false);