Toasts represent a type of notification message, commonly associated with push notifications on mobile devices. The `value` attribute of the `<tc:toasts/>` tag contains a list of toasts objects, each representing a single toast. A toast object MUST implement the `org.apache.myfaces.tobago.application.Toast` interface. If a toast has been closed, the corresponding object is removed from the list. The content of the toasts is fully customizable.

Tag Library Documentation:

FacesMessage but as a toast.

<tc:toasts id="toastFacesMessages" value="\#{toastsController.toastFacesMessages}" var="toastFacesMessage" placement="bottomLeft"> <f:facet name="header"> <tc:panel> <tc:style customClass="rounded me-2 \#{toastFacesMessage.severityColor}" width="1.25rem" height="1.25rem"/> </tc:panel> <strong> <tc:out value="\#{toastFacesMessage.severityText}" plain="true"/> </strong> </f:facet> <tc:out value="\#{toastFacesMessage.text}" plain="true"/> </tc:toasts>

Create a toast with a progress bar. Automatic dispose after a specific time is disabled (`disposeDelay="-1"`). The close button is hidden (`markup="hideCloseButton"`). The component is refreshed every 100ms. After the progress bar has reached 100%, the progress bar object is removed from the list (`value="\#{toastsController.progressBars}"`. After the next refresh the related toast will also be removed from the page.

<tc:toasts id="progressBarToasts" value="\#{toastsController.progressBars}" var="progress" disposeDelay="-1" markup="hideCloseButton"> <f:facet name="reload"> <tc:reload frequency="100"/> </f:facet> <f:facet name="header"> <tc:out value="Progress" plain="true"/> </f:facet> <tc:progress value="\#{progress.value}" max="\#{progress.max}"/> </tc:toasts>

To put a custom CSS class on a toast, use `<tc:style customClass="..."/>`.

<tc:toasts id="customToasts" value="\#{toastsController.customCssToasts}" var="customToast"> <tc:style customClass="\#{customToast.cssClass}"/> <f:facet name="header"> <tc:out value="Custom toast" plain="true"/> </f:facet> <tc:out value="The used CSS class is: \#{customToast.cssClass}" plain="true"/> </tc:toasts>