# Toast

The Toast component provides short-lived notifications that alert users with important messages, such as success, information, warning, or error notifications. Designed as a utility element, Toast uses a layered approach to overlay messages on top of the existing content. It offers a variety of display positions (e.g., top right, top left, bottom centers, full-width at the top or bottom) and can also be configured to display as a banner with an optional hide button.

Import the required namespaces and instantiate Toast using the static helper methods from Tesserae.UI. You can configure the position, duration, and style before firing one of the notification methods. For example, the following code displays an information toast in the default top-right position:

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class ToastExample
{
    public void ShowNotification()
    {
        // Display an information toast in the top right (default)
        Toast().Information("Info", "This is an information toast.");
    }
}

• TopRight(): Toast
  Sets the toast position to top right.

• TopCenter(): Toast
  Sets the toast position to top center.

• TopLeft(): Toast
  Sets the toast position to top left.

• BottomRight(): Toast
  Sets the toast position to bottom right.

• BottomCenter(): Toast
  Sets the toast position to bottom center.

• BottomLeft(): Toast
  Sets the toast position to bottom left.

• TopFull(): Toast
  Sets the toast position to a full-width toast at the top.

• BottomFull(): Toast
  Sets the toast position to a full-width toast at the bottom.

• Banner(bool showHideButton = true): Toast
  Configures the toast to display as a banner. Optionally displays a hide button when showHideButton is true.
  Parameter: • showHideButton (bool): Determines if a hide button should be shown on the banner.

• Duration(TimeSpan timeSpan): Toast
  Sets the duration before the toast is automatically dismissed.
  Parameter: • timeSpan (TimeSpan): The duration to display the toast.

• Success(IComponent title, IComponent message): Toast
  Displays a success notification using UI components for the title and message.

• Information(IComponent title, IComponent message): Toast
  Displays an informational notification using UI components for the title and message.

• Warning(IComponent title, IComponent message): Toast
  Displays a warning notification using UI components for the title and message.

• Error(IComponent title, IComponent message): Toast
  Displays an error notification using UI components for the title and message.

• Success(IComponent message): Toast
  Overload to display a success notification with only a message component.

• Information(IComponent message): Toast
  Overload to display an informational notification with only a message component.

• Warning(IComponent message): Toast
  Overload to display a warning notification with only a message component.

• Error(IComponent message): Toast
  Overload to display an error notification with only a message component.

• Success(string title, string message): Toast
  Displays a success notification with text title and message. If the title is null or empty, only the message is shown.

• Information(string title, string message): Toast
  Displays an informational notification with text title and message.

• Warning(string title, string message): Toast
  Displays a warning notification with text title and message.

• Error(string title, string message): Toast
  Displays an error notification with text title and message.

• Success(string message): Toast
  Overload to display a success notification using just a string message.

• Information(string message): Toast
  Overload to display an informational notification using just a string message.

• Warning(string message): Toast
  Overload to display a warning notification using just a string message.

• Error(string message): Toast
  Overload to display an error notification using just a string message.

• Width(UnitSize width): Toast
  Sets a custom width for the toast container.
  Parameter: • width (UnitSize): The desired width.

• Height(UnitSize height): Toast
  Sets a custom height for the toast container.
  Parameter: • height (UnitSize): The desired height.

• NoDismiss(bool value = true): Toast
  Disables the dismissal on click functionality when set to true.
  Parameter: • value (bool): If true, clicking will not auto dismiss the toast.

• NoOverwrite(bool value = true): Toast
  Prevents an identical toast from overwriting an existing one when set to true.
  Parameter: • value (bool): If true, overwriting of existing toasts is disabled.

• Hide(Action onHidden = null): void
  Hides the toast. Optionally, executes a callback after the toast is hidden.
  Parameter: • onHidden (Action): Callback to be executed once the toast is hidden.

• Remove(): void
  A shortcut method to hide and remove the toast from view.

• DefaultPosition (static Position):
  Gets or sets the default position for toasts. The default is set to TopRight.

Displays an informational toast in the default top-right position.

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class BasicToastSample
{
    public void ShowToast()
    {
        // Displays an informational toast on the top right.
        Toast().Information("Info", "This is a basic information toast.");
    }
}

Demonstrates how to display toast notifications in various positions, including as a banner.

using System;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class PositionToastSample
{
    public void ShowToasts()
    {
        // Default toast at top-right with a string message.
        Toast().Information("Info", "Displayed at top right");

        // Toast at top-left.
        Toast().TopLeft().Success("Success", "Displayed at top left");

        // Toast at bottom-right.
        Toast().BottomRight().Warning("Warning", "Displayed at bottom right");

        // Toast as a banner (full width at top) with a hide button.
        Toast().TopFull().Banner().Error("Error", "This toast is acting as a banner");
    }
}

• Button
• Dialog