Tesserae - Badge

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.

API reference

enum

BadgeTone

public enum BadgeTone

Predefined visual tones used to color the component.

class

TokenBase<T>

public abstract class TokenBase<T> : ComponentBase<T, HTMLElement> where T : TokenBase<T>

Properties

Property

TokenBase.Text

public string Text { get ; set ; }

Gets or sets the text shown in the component.

Property

TokenBase.Icon

public string Icon { get ; set ; }

Gets or sets the icon shown by the component.

Property

TokenBase.IsPill

public bool IsPill { get ; set ; }

Returns a value indicating whether the component is pill.

Property

TokenBase.IsOutline

public bool IsOutline { get ; set ; }

Returns a value indicating whether the component is outline.

Property

TokenBase.IsFilled

public bool IsFilled { get ; set ; }

Returns a value indicating whether the component is filled.

Methods

Method

TokenBase.SetText

public T SetText(string text)

Sets the text of the component.

Method

TokenBase.SetIcon

public T SetIcon(string icon)

Sets the icon of the component.

Method

TokenBase.Pill

public T Pill(bool value = true)

Configures the component to pill.

Method

TokenBase.Outline

public T Outline(bool value = true)

Configures the component to outline.

Method

TokenBase.Filled

public T Filled(bool value = true)

Configures the component to filled.

Method

TokenBase.Background

public T Background(string color)

Gets or sets the CSS background of the component.

Method

TokenBase.Foreground

public T Foreground(string color)

Gets or sets the CSS color (foreground) of the component.

Method

TokenBase.Tone

public T Tone(BadgeTone tone)

Configures the component to tone.

Method

TokenBase.Primary

public T Primary()

Styles the component using the primary tone.

Method

TokenBase.Success

public T Success()

Styles the component using the success tone.

Method

TokenBase.Warning

public T Warning()

Styles the component using the warning tone.

Method

TokenBase.Danger

public T Danger()

Styles the component using the danger tone.

Method

TokenBase.Info

public T Info()

Styles the component using the informational tone.

Method

TokenBase.Neutral

public T Neutral()

Configures the component to neutral.

Method

TokenBase.OnRemove

public T OnRemove(Action<T> onRemove)

Registers a callback invoked when the remove event fires.

Method

TokenBase.Removable

public T Removable(bool value = true)

Configures the component to removable.

Method

TokenBase.Render

public override HTMLElement Render()

Renders the component's root HTML element.

class

Badge

public sealed class Badge : TokenBase<Badge>

Constructors

Constructor

Badge

public Badge(string text = null) : base("tss-badge", text)

Initializes a new instance of this class.

class

Tag

public sealed class Tag : TokenBase<Tag>

Constructors

Constructor

Tag

public Tag(string text = null) : base("tss-tag", text)

Initializes a new instance of this class.

class

Chip

public sealed class Chip : TokenBase<Chip>

Constructors

Constructor

Chip

public Chip(string text = null) : base("tss-chip", text)

Initializes a new instance of this class.

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

API reference

Properties

TokenBase.Text

TokenBase.Icon

TokenBase.IsPill

TokenBase.IsOutline

TokenBase.IsFilled

Methods

TokenBase.SetText

TokenBase.SetIcon

TokenBase.Pill

TokenBase.Outline

TokenBase.Filled

TokenBase.Background

TokenBase.Foreground

TokenBase.Tone

TokenBase.Primary

TokenBase.Success

TokenBase.Warning

TokenBase.Danger

TokenBase.Info

TokenBase.Neutral

TokenBase.OnRemove

TokenBase.Removable

TokenBase.Render

Constructors

Badge

Constructors

Tag

Constructors

Chip

Samples

Standard Badges

Tags and Chips

See also