Tesserae

Badge

Description

A component to display a badge

Badges, Tags, and Chips are small visual elements used to categorize content, highlight status, or display metadata.

They come in various styles: Badges are typically static indicators, Tags are for categorization, and Chips often include interactive elements like a removal button.

Samples

Standard Badges

badge-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 badges = HStack().Children(
                Badge("Default"),
                Badge("Primary").Primary(),
                Badge("Success").Success(),
                Badge("Warning").Warning(),
                Badge("Danger").Danger(),
                Badge("Info").Info().Outline());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(badges);
        }
    }
}

Tags and Chips

Tags and chips support icons, pill shapes, and interactive removal.

badge-tags-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 tags = HStack().Children(
                Tag("Categorization").Outline().Pill(),
                Tag("Metadata").SetIcon(Icon.Transform(UIcons.Tags, UIconsWeight.Regular)).Outline(),
                Chip("Interactive Chip").Filled().OnRemove(c => Toast().Success("Removed chip")),
                Chip("Status Chip").Success().Pill());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(tags);
        }
    }
}

Badge

Description

Samples

Standard Badges

Tags and Chips

See also