Tesserae - Toast

Toast

Description

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.

Usage

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:

toast-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new ToastExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ToastExample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show Toast").OnClick((s, e) =>
            {
                // Display an information toast in the top right (default)
                Toast().Information("Info", "This is an information toast.");
            }).Render();
        }
    }
}

API reference

class

Toast

public class Toast : Layer<Toast>

A Toast component for displaying non-blocking notifications to the user.

Namespace: Tesserae
Inheritance: Layer<Toast> → Toast

Properties

Name	Description
DefaultPosition	Gets or sets the default position for toasts.

Property

Toast.DefaultPosition

public static Position DefaultPosition { get; set; }

Gets or sets the default position for toasts.

Methods

Name	Description
Class	Adds a CSS class to the toast container.
RemoveClass	Removes a CSS class from the toast container.
TopRight	Sets the toast position to top-right.
TopCenter	Sets the toast position to top-center.
TopLeft	Sets the toast position to top-left.
BottomRight	Sets the toast position to bottom-right.
BottomCenter	Sets the toast position to bottom-center.
BottomLeft	Sets the toast position to bottom-left.
TopFull	Sets the toast position to top-full width.
BottomFull	Sets the toast position to bottom-full width.
Banner	Displays the toast as a banner at the top or bottom of the page.
Duration	Sets the duration for which the toast is visible.
Success	Displays a success toast.
Information	Displays an information toast.
Warning	Displays a warning toast.
Error	Displays an error toast.
Width	Sets the width of the toast.
Height	Sets the height of the toast.
NoDismiss	Prevents the toast from being dismissed when clicked.
Overwrite	Prevents the toast from being overwritten by a new toast with the same content.
Hide	Hides the toast.
Remove	Removes the toast.

Method

Toast.Class

public Toast Class(string className)

Adds a CSS class to the toast container.

Parameters

className: The class name.

Returns

The current instance of the type.

Method

Toast.RemoveClass

public Toast RemoveClass(string className)

Removes a CSS class from the toast container.

Parameters

className: The class name.

Returns

The current instance of the type.

Method

Toast.TopRight

public Toast TopRight()

Sets the toast position to top-right.

Returns

The current instance of the type.

Method

Toast.TopCenter

public Toast TopCenter()

Sets the toast position to top-center.

Returns

The current instance of the type.

Method

Toast.TopLeft

public Toast TopLeft()

Sets the toast position to top-left.

Returns

The current instance of the type.

Method

Toast.BottomRight

public Toast BottomRight()

Sets the toast position to bottom-right.

Returns

The current instance of the type.

Method

Toast.BottomCenter

public Toast BottomCenter()

Sets the toast position to bottom-center.

Returns

The current instance of the type.

Method

Toast.BottomLeft

public Toast BottomLeft()

Sets the toast position to bottom-left.

Returns

The current instance of the type.

Method

Toast.TopFull

public Toast TopFull()

Sets the toast position to top-full width.

Returns

The current instance of the type.

Method

Toast.BottomFull

public Toast BottomFull()

Sets the toast position to bottom-full width.

Returns

The current instance of the type.

Method

Toast.Banner

public Toast Banner(bool showHideButton = true)

Displays the toast as a banner at the top or bottom of the page.

Parameters

showHideButton: Whether to show a button to hide the banner.

Returns

The current instance of the type.

Method

Toast.Duration

public Toast Duration(TimeSpan timeSpan)

Sets the duration for which the toast is visible.

Parameters

timeSpan: The duration.

Returns

The current instance of the type.

Method

Toast.Success

Overload
Success(IComponent, IComponent)	Displays a success toast.
Success(IComponent)	Displays a success toast with only a message.
Success(string, string)	Displays a success toast with string content.
Success(string)	Displays a success toast with string message.

Success(IComponent, IComponent)

public Toast Success(IComponent title, IComponent message)

Displays a success toast.

Parameters

title IComponent: The title of the toast.
message IComponent: The message content of the toast.

Returns

The current instance of the type.

Success(IComponent)

public Toast Success(IComponent message)

Displays a success toast with only a message.

Parameters

message IComponent: The message content of the toast.

Returns

The current instance of the type.

Success(string, string)

public Toast Success(string title, string message)

Displays a success toast with string content.

Parameters

title string: The title of the toast.
message string: The message content of the toast.

Returns

The current instance of the type.

Success(string)

public Toast Success(string message)

Displays a success toast with string message.

Parameters

message string: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Information

Overload
Information(IComponent, IComponent)	Displays an information toast.
Information(IComponent)	Displays an information toast with only a message.
Information(string, string)	Displays an information toast with string content.
Information(string)	Displays an information toast with string message.

Information(IComponent, IComponent)

public Toast Information(IComponent title, IComponent message)

Displays an information toast.

Parameters

title IComponent: The title of the toast.
message IComponent: The message content of the toast.

Returns

The current instance of the type.

Information(IComponent)

public Toast Information(IComponent message)

Displays an information toast with only a message.

Parameters

message IComponent: The message content of the toast.

Returns

The current instance of the type.

Information(string, string)

public Toast Information(string title, string message)

Displays an information toast with string content.

Parameters

title string: The title of the toast.
message string: The message content of the toast.

Returns

The current instance of the type.

Information(string)

public Toast Information(string message)

Displays an information toast with string message.

Parameters

message string: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Warning

Overload
Warning(IComponent, IComponent)	Displays a warning toast.
Warning(IComponent)	Displays a warning toast with only a message.
Warning(string, string)	Displays a warning toast with string content.
Warning(string)	Displays a warning toast with string message.

Warning(IComponent, IComponent)

public Toast Warning(IComponent title, IComponent message)

Displays a warning toast.

Parameters

title IComponent: The title of the toast.
message IComponent: The message content of the toast.

Returns

The current instance of the type.

Warning(IComponent)

public Toast Warning(IComponent message)

Displays a warning toast with only a message.

Parameters

message IComponent: The message content of the toast.

Returns

The current instance of the type.

Warning(string, string)

public Toast Warning(string title, string message)

Displays a warning toast with string content.

Parameters

title string: The title of the toast.
message string: The message content of the toast.

Returns

The current instance of the type.

Warning(string)

public Toast Warning(string message)

Displays a warning toast with string message.

Parameters

message string: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Error

Overload
Error(IComponent, IComponent)	Displays an error toast.
Error(IComponent)	Displays an error toast with only a message.
Error(string, string)	Displays an error toast with string content.
Error(string)	Displays an error toast with string message.

Error(IComponent, IComponent)

public Toast Error(IComponent title, IComponent message)

Displays an error toast.

Parameters

title IComponent: The title of the toast.
message IComponent: The message content of the toast.

Returns

The current instance of the type.

Error(IComponent)

public Toast Error(IComponent message)

Displays an error toast with only a message.

Parameters

message IComponent: The message content of the toast.

Returns

The current instance of the type.

Error(string, string)

public Toast Error(string title, string message)

Displays an error toast with string content.

Parameters

title string: The title of the toast.
message string: The message content of the toast.

Returns

The current instance of the type.

Error(string)

public Toast Error(string message)

Displays an error toast with string message.

Parameters

message string: The message content of the toast.

Returns

The current instance of the type.

Method

Toast.Width

public Toast Width(UnitSize width)

Sets the width of the toast.

Parameters

width: The width.

Returns

The current instance of the type.

Method

Toast.Height

public Toast Height(UnitSize height)

Sets the height of the toast.

Parameters

height: The height.

Returns

The current instance of the type.

Method

Toast.NoDismiss

public Toast NoDismiss(bool value = true)

Prevents the toast from being dismissed when clicked.

Parameters

value: Whether to prevent dismissal on click.

Returns

The current instance of the type.

Method

Toast.Overwrite

public Toast Overwrite(bool value = true)

Prevents the toast from being overwritten by a new toast with the same content.

Parameters

value: Whether to prevent overwriting.

Returns

The current instance of the type.

Method

Toast.Hide

public override void Hide(Action onHidden = null)

Hides the toast.

Parameters

onHidden: An optional action to perform when the toast is hidden.

Method

Toast.Remove

public void Remove()

Removes the toast.

Samples

Basic Toast Notification

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

toast-2-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new BasicToastSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BasicToastSample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show Toast").OnClick((s, e) =>
            {
                // Displays an informational toast on the top right.
                Toast().Information("Info", "This is a basic information toast.");
            }).Render();
        }
    }
}

Toast Notifications in Different Positions

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

toast-3-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new PositionToastSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class PositionToastSample : IComponent
    {
        public HTMLElement Render()
        {
            return Stack().Children(
                Button("Top Right").OnClick((s, e) =>
                    Toast().Information("Info", "Displayed at top right")),
                Button("Top Left").OnClick((s, e) =>
                    Toast().TopLeft().Success("Success", "Displayed at top left")),
                Button("Bottom Right").OnClick((s, e) =>
                    Toast().BottomRight().Warning("Warning", "Displayed at bottom right")),
                Button("Banner").OnClick((s, e) =>
                    Toast().TopFull().Banner().Error("Error", "This toast is acting as a banner"))
            ).Render();
        }
    }
}