Tesserae - Button

Button

Description

The Button component provides an interactive UI element that the user can click to trigger an action. It is an essential component in the Tesserae UI library, used for actions such as form submission, command execution, and triggering events. The Button supports various visual styles like primary, success, danger, link, and icon-based buttons. It also supports spinner states for indicating loading actions.

Usage

A Button is typically instantiated using the Tesserae.UI helper method. You can customize its text, style, icons, and behavior using the provided methods and properties. The following example demonstrates how to create a standard button, a primary button, and a link button with a tooltip:

button-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new ButtonUsageExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ButtonUsageExample : IComponent
    {
        public HTMLElement Render()
        {
            return Stack().Children(
                Button().SetText("Standard")
                    .SetTitle("This is a standard button")
                    .OnClick((_, e) => alert("Standard button clicked!")),
                Button().SetText("Primary")
                    .SetTitle("This is a primary button")
                    .Primary()
                    .OnClick((_, e) => alert("Primary button clicked!")),
                Button().SetText("Link")
                    .Tooltip("This is a link style button")
                    .Link()
                    .OnClick((_, e) => alert("Link button clicked!"))
            ).Render();
        }
    }
}

API reference

class

Button

public class Button : ComponentBase<Button, HTMLButtonElement>, ITextFormating, IHasBackgroundColor, IHasForegroundColor, ICanWrap, IRoundedStyle

The standard clickable button component, with optional icons, loading state, primary/secondary variants and dropdown / split-button support.

Constructors

Constructor

Button

public Button(string text = string.Empty)

Initializes a new instance of this class.

Properties

Property

Button.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Property

Button.Foreground

public string Foreground { get ; set ; }

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

Property

Button.Text

public string Text { get ; set ; }

Gets or sets button text

Property

Button.Title

public string Title { get ; set ; }

Gets or sets button title

Property

Button.Icon

public string Icon { get ; set ; }

Gets or sets button icon (icon class)

Property

Button.IsCompact

public bool IsCompact { get ; set ; }

Gets or set whenever button is rendered in a compact form

Property

Button.IsLink

public bool IsLink { get ; set ; }

Gets or set whenever button is rendered like a link

Property

Button.IsPrimary

public bool IsPrimary { get ; set ; }

Gets or set whenever button is primary

Property

Button.IsSuccess

public bool IsSuccess { get ; set ; }

Gets or set whenever button is primary

Property

Button.IsDanger

public bool IsDanger { get ; set ; }

Gets or set whenever button is danger

Property

Button.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets whenever button is enabled

Property

Button.CanWrap

public bool CanWrap { get ; set ; }

Gets or sets a value indicating whether the component's text can wrap onto multiple lines.

Property

Button.EnableEllipsis

public bool EnableEllipsis { get ; set ; }

Gets or sets a value indicating whether overflowing text is truncated with an ellipsis.

Property

Button.Size

public TextSize Size { get ; set ; }

Gets or sets the size of the component.

Property

Button.Weight

public TextWeight Weight { get ; set ; }

Gets or sets the font weight of the component.

Property

Button.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment of the component.

Methods

Method

Button.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

Button.Compact

public Button Compact()

Renders the component in a compact form.

Method

Button.NoMargin

public Button NoMargin()

Removes / disables the margin on the component.

Method

Button.NoPadding

public Button NoPadding()

Removes / disables the padding on the component.

Method

Button.LessPadding

public Button LessPadding()

Reduces the component's padding.

Method

Button.Link

public Button Link()

Renders the component as a hyperlink.

Method

Button.DefaultLink

public Button DefaultLink()

Renders the component as a default-toned hyperlink.

Method

Button.DangerLink

public Button DangerLink()

Renders the component as a danger-toned hyperlink.

Method

Button.ToSpinner

public void ToSpinner(string text = null)

Replaces the button's content with an inline spinner (commonly used while an async action is in progress).

Method

Button.UndoSpinner

public void UndoSpinner()

Restores the button's original content after was used.

Method

Button.OnClickSpinWhile

public Button OnClickSpinWhile(Func<Task> action, string text = null, Action<Button, Exception> onError = null)

Registers a callback invoked when the click spin while event fires.

Method

Button.OnClickSpinWhile

public Button OnClickSpinWhile(Func<MouseEvent, Task> action, string text = null, Action<Button, Exception> onError = null)

Registers a callback invoked when the click spin while event fires.

Method

Button.OnClick

public Button OnClick(Action action)

Registers a callback invoked when the click event fires.

Method

Button.OnContextMenu

public Button OnContextMenu(Action action)

Registers a callback invoked when the context menu event fires.

Method

Button.SpinWhile

public void SpinWhile(Func<Task> action, string text = null, Action<Button, Exception> onError = null)

Runs the given async action while showing an inline spinner on the button. Restores the original button content on completion (or on error, optionally invoking the supplied error handler).

Method

Button.Primary

public Button Primary()

Styles the component using the primary tone.

Method

Button.Success

public Button Success()

Styles the component using the success tone.

Method

Button.Danger

public Button Danger()

Styles the component using the danger tone.

Method

Button.WithFilterEffects

public Button WithFilterEffects()

Returns the component configured with the given filter effects.

Method

Button.Disabled

public Button Disabled(bool value = true)

Disables the component.

Method

Button.NoBorder

public Button NoBorder()

Removes / disables the border on the component.

Method

Button.NoMinSize

public Button NoMinSize()

Removes / disables the min size on the component.

Method

Button.NoBackground

public Button NoBackground()

Removes / disables the background on the component.

Method

Button.LinkOnHover

public Button LinkOnHover()

Renders the component as a hyperlink only on hover.

Method

Button.NoHover

public Button NoHover()

Removes / disables the hover on the component.

Method

Button.Color

public Button Color(string background, string textColor = "white", string borderColor = "white", string iconColor = "")

Configures the component to color.

Method

Button.SetText

public Button SetText(string text)

Sets the text of the component.

Method

Button.SetTitle

public Button SetTitle(string title)

Sets the title of the component.

Method

Button.ClearIcon

public Button ClearIcon()

Clears the icon.

Method

Button.SetIcon

public Button SetIcon(Emoji icon, bool afterText = false)

Sets the icon of the component.

Method

Button.SetIcon

public Button SetIcon(UIcons icon, string color = "", TextSize size = TextSize.Small, UIconsWeight weight = UIconsWeight.Regular, bool afterText = false)

Sets the icon of the component.

Method

Button.IconOnHover

public Button IconOnHover()

Configures the icon on hover on the component.

Method

Button.ReplaceContent

public Button ReplaceContent(IComponent content)

Replaces the content in the component.

Method

Button.ReplaceText

public Button ReplaceText(HTMLSpanElement textSpan)

Replaces the text in the component.

Method

Button.Wrap

public Button Wrap()

Allows the component's content to wrap onto multiple lines.

Method

Button.Ellipsis

public Button Ellipsis()

Configures the component to ellipsis.

Method

Button.NoWrap

public Button NoWrap()

Removes / disables the wrap on the component.

Method

Button.Focus

public Button Focus()

Moves keyboard focus to the component.

Method

Button.WithHotKey

public Button WithHotKey(string keys, Hotkeys.Option options = null)

Returns the component configured with the given hot key.

Samples

Basic Button Usage

The following sample creates a group of buttons showcasing standard, primary, link, icon, and spinner buttons:

button-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new ButtonSampleUsage();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ButtonSampleUsage : IComponent
    {
        public HTMLElement Render()
        {
            // Create a stack container to hold the buttons
            return Stack().Children(
                // Standard and Primary Buttons
                TextBlock("Default Button").Medium(),
                HStack().Children(
                    Button().SetText("Standard")
                            .Tooltip("This is a standard button")
                            .OnClick((s, e) => alert("Standard button clicked!")),
                    Button().SetText("Primary")
                            .Tooltip("This is a primary button")
                            .Primary()
                            .OnClick((s, e) => alert("Primary button clicked!")),
                    Button().SetText("Link")
                            .Tooltip("This is a link button")
                            .Link()
                            .OnClick((s, e) => alert("Link button clicked!"))
                ),
                // Icon Buttons
                TextBlock("Icon Button").Medium(),
                HStack().Children(
                    Button().SetText("Confirm")
                            .SetIcon(UIcons.Check)
                            .Success()
                            .OnClick((s, e) => alert("Confirm clicked!")),
                    Button().SetText("Delete")
                            .SetIcon(UIcons.Trash)
                            .Danger()
                            .OnClick((s, e) => alert("Delete clicked!"))
                ),
                // Spinner Button demonstrating async action
                TextBlock("Spinner Button").Medium(),
                HStack().Children(
                    Button().SetText("Spin")
                            .OnClickSpinWhile(async () => await Task.Delay(1000)),
                    Button().SetText("Spin with text")
                            .OnClickSpinWhile(async () => await Task.Delay(1000), "loading...")
                )
            ).Render();
        }
    }
}

Button

Description

Usage

API reference

Constructors

Button

Properties

Button.Background

Button.Foreground

Button.Text

Button.Title

Button.Icon

Button.IsCompact

Button.IsLink

Button.IsPrimary

Button.IsSuccess

Button.IsDanger

Button.IsEnabled

Button.CanWrap

Button.EnableEllipsis

Button.Size

Button.Weight

Button.TextAlign

Methods

Button.Render

Button.Compact

Button.NoMargin

Button.NoPadding

Button.LessPadding

Button.Link

Button.DefaultLink

Button.DangerLink

Button.ToSpinner

Button.UndoSpinner

Button.OnClickSpinWhile

Button.OnClickSpinWhile

Button.OnClick

Button.OnContextMenu

Button.SpinWhile

Button.Primary

Button.Success

Button.Danger

Button.WithFilterEffects

Button.Disabled

Button.NoBorder

Button.NoMinSize

Button.NoBackground

Button.LinkOnHover

Button.NoHover

Button.Color

Button.SetText

Button.SetTitle

Button.ClearIcon

Button.SetIcon

Button.SetIcon

Button.IconOnHover

Button.ReplaceContent

Button.ReplaceText

Button.Wrap

Button.Ellipsis

Button.NoWrap

Button.Focus

Button.WithHotKey

Samples

Basic Button Usage

See also

Referenced by