The Message component is used to display static messages, alerts, or empty states. It supports an icon, title, text body, and an optional note area.
It comes with variants for standard, success, warning, and error states.
Samples
Standard Message (with Note)
message-standard-sample.js
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 component = Message("No Database Schema Yet", "Start by describing your database requirements in the chat. I'll help you design a complete schema with tables, relationships, and best practices.")
.Icon(UIcons.FileCode)
.Note(
HStack().AlignItems(ItemAlign.Center).Children(
Icon(UIcons.Bulb, size: TextSize.Small).PR(8),
TextBlock("Try saying: \"Create a blog database with users, posts, and comments\"").SemiBold()
)
);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}
Error Message
message-error-sample.js
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 component = Message("Something went wrong", "We couldn't save your changes. Please check your internet connection and try again.")
.Icon(UIcons.CrossCircle)
.Variant(MessageVariant.Error);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}
No Results
message-no-results-sample.js
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 component = Message("No results found", "We couldn't find any items matching your search criteria.")
.Icon(UIcons.Search)
.Variant(MessageVariant.Default);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
}
}
