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.

Samples

Standard Badges

badge-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.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 Transpose.Core;
using Tesserae;
using static Transpose.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);
        }
    }
}

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.
Tint	Tints the token with any CSS colour: a translucent fill and border of it, and text mixed from it and the page's foreground, so it stays readable in light and dark mode - the way an issue tracker draws a label whose colour a user picked. Pass `null` to remove the tint.
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.
AI	Styles the component using the AI tone - the filled purple-to-blue gradient, or the tint and accent when combined with `Outline`. A badge is small enough that the tint alone would not read, which is why this one fills.
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.Tint

public T Tint(string color)

Tints the token with any CSS colour: a translucent fill and border of it, and text mixed from it and the page's foreground, so it stays readable in light and dark mode - the way an issue tracker draws a label whose colour a user picked. Pass null to remove the tint.

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

public T AI(bool strongEffect = false)

Styles the component using the AI tone - the filled purple-to-blue gradient, or the tint and accent when combined with Outline. A badge is small enough that the tint alone would not read, which is why this one fills.

Parameters

strongEffect: Asks for the louder form of the AI styling. A custom theme that tones the AI look down (e.g. Tesserae.Themes.Curiosity) brings more of it back for this element; the default theme draws both forms the same today. Sets the tss-ai-strong class.

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.

Badge

Description

Samples

Standard Badges

Tags and Chips

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

TokenBase.Tone

TokenBase.Primary

TokenBase.Success

TokenBase.Warning

TokenBase.Danger

TokenBase.Info

TokenBase.Neutral

TokenBase.AI

Parameters

TokenBase.OnRemove

TokenBase.Removable

TokenBase.Render

Constructors

Badge

Constructors

Tag

Constructors

Chip

See also