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 Badge component.

Namespace: Tesserae

class

TokenBase<T>

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

Namespace: Tesserae
Inheritance: ComponentBase<T, HTMLElement> → TokenBase<T>

Properties

Name	Description
Text	Gets or sets the text shown in the component.
Icon	Gets or sets the icon shown by the component.
IsPill	Returns a value indicating whether the component is pill.
IsOutline	Returns a value indicating whether the component is outline.
IsFilled	Returns a value indicating whether the component is filled.

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

Name	Description
SetText	Sets the text of the component.
SetIcon	Sets the icon of the component.
Pill	Configures the component to pill.
Outline	Configures the component to outline.
Filled	Configures the component to filled.
Background	Gets or sets the CSS background of the component.
Foreground	Gets or sets the CSS color (foreground) of the component.
Tone	Configures the component to tone.
Primary	Styles the component using the primary tone.
Success	Styles the component using the success tone.
Warning	Styles the component using the warning tone.
Danger	Styles the component using the danger tone.
Info	Styles the component using the informational tone.
Neutral	Configures the component to neutral.
OnRemove	Registers a callback invoked when the remove event fires.
Removable	Configures the component to removable.
Render	Renders the component's root HTML element.

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>

Namespace: Tesserae
Inheritance: TokenBase<Badge> → Badge

Constructors

Name	Description
Badge	Initializes a new instance of this class.

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>

Namespace: Tesserae
Inheritance: TokenBase<Tag> → Tag

Constructors

Name	Description
Tag	Initializes a new instance of this class.

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>

Namespace: Tesserae
Inheritance: TokenBase<Chip> → Chip

Constructors

Name	Description
Chip	Initializes a new instance of this class.

Constructor

Chip

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

Initializes a new instance of this class.

Samples

Standard Badges

badge-sample.cs

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.cs

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