Tesserae - Action Button

ActionButton

Description

The ActionButton component is a composite UI control that combines a display area and an associated action button. It is designed to enable users to trigger an action either by clicking on the main display or the separate action icon. Use this component when you want a button that can provide both a main interactive area and an additional action trigger, typically in contexts where extra functionality or a dropdown/callout is needed.

Usage

To instantiate an ActionButton, use the static helper method provided by Tesserae.UI. You can specify display text, icons, and even customize behavior by chaining method calls such as setting click event handlers. The component supports several overloads, accommodating a simple text label with optional icons or an entire IComponent as its display content.

Below is a sample that creates various ActionButtons with different visual styles and behaviors:

action-button-sample.cs

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 ActionButtonDemo();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ActionButtonDemo : IComponent
    {
        public HTMLElement Render()
        {
            return VStack().Children(
                // Standard ActionButton with text only.
                ActionButton("Action1")
                    .OnClickDisplay((display, evt) => alert("Clicked on display!"))
                    .OnClickAction((button, evt)  => alert("Clicked on action!")),

                // ActionButton with a custom display icon (Calendar) and primary style.
                ActionButton("Action1.1", actionIcon: UIcons.Calendar)
                    .Primary()
                    .OnClickDisplay((display, evt) => alert("Clicked on display!"))
                    .OnClickAction((button, evt)  => alert("Clicked on action!")),

                // Danger styled ActionButton with a display icon.
                ActionButton("Action 2", displayIcon: UIcons.Calendar)
                    .Danger()
                    .OnClickDisplay((display, evt) => alert("Clicked on display!"))
                    .OnClickAction((button, evt)  => alert("Clicked on action!"))
                    .ModifyActionButton(component =>
                    {
                        // Set a tooltip on the action button part.
                        Raw(component).Tooltip("Action triggered", arrow: true);
                    }),

                // ActionButton with a composite display content.
                ActionButton(
                    VStack().Children(
                        HStack().Children(
                            Icon(UIcons.Arrows),
                            TextBlock("Lorem ipsum")
                        ),
                        TextBlock("Subtitle").Tiny(),
                        TextBlock("Subtitle2").Tiny()
                    ))
                    .Primary()
                    .OnClickDisplay((display, evt) => alert("Clicked on display!"))
                    .OnClickAction((button, evt)  => alert("Clicked on action!"))
            ).Render();
        }
    }
}

API reference

class

ActionButton

public class ActionButton : IComponent, IHasBackgroundColor

A borderless, lightweight button typically used for inline actions inside cards, lists or toolbars.

Namespace: Tesserae
Implements: IComponent, IHasBackgroundColor

Constructors

Name	Description
ActionButton	Initializes a new instance of this class.

Constructor

ActionButton

Overload
ActionButton(string, UIcons, UIconsWeight, string, TextSize, UIconsWeight, UIcons, string, TextSize)	Initializes a new instance of this class.
ActionButton(string, UIcons, UIconsWeight, UIcons, string, TextSize)	Initializes a new instance of this class.
ActionButton(string, UIcons, UIconsWeight, string, TextSize)	Initializes a new instance of this class.
ActionButton(IComponent, string, string, TextSize)	Initializes a new instance of this class.

ActionButton(string, UIcons, UIconsWeight, string, TextSize, UIconsWeight, UIcons, string, TextSize)

public ActionButton( string textContent, UIcons displayIcon, UIconsWeight displayIconWeight = UIconsWeight.Regular, string displayColor = null, TextSize displayIconSize = TextSize.Small, UIconsWeight actionIconWeight = UIconsWeight.Regular, UIcons actionIcon = UIcons.AngleCircleDown, string actionColor = null, TextSize actionIconSize = TextSize.Small) : this(HStack().Children(Icon(displayIcon, displayIconWeight, displayIconSize, displayColor), TextBlock(textContent).PL(8)), Icon.Transform(actionIcon, actionIconWeight), actionColor, actionIconSize)

Initializes a new instance of this class.

Parameters

textContent string
displayIcon UIcons
displayIconWeight UIconsWeight
displayColor string
displayIconSize TextSize
actionIconWeight UIconsWeight
actionIcon UIcons
actionColor string
actionIconSize TextSize

ActionButton(string, UIcons, UIconsWeight, UIcons, string, TextSize)

public ActionButton( string textContent, UIcons displayIcon, UIconsWeight actionIconWeight = UIconsWeight.Regular, UIcons actionIcon = UIcons.AngleCircleDown, string actionColor = null, TextSize actionIconSize = TextSize.Small) : this(HStack().Children(Icon(displayIcon), TextBlock(textContent).PL(8)), Icon.Transform(actionIcon, actionIconWeight), actionColor, actionIconSize)

Initializes a new instance of this class.

Parameters

textContent string
displayIcon UIcons
actionIconWeight UIconsWeight
actionIcon UIcons
actionColor string
actionIconSize TextSize

ActionButton(string, UIcons, UIconsWeight, string, TextSize)

public ActionButton( string textContent, UIcons actionIcon = UIcons.AngleCircleDown, UIconsWeight actionIconWeight = UIconsWeight.Regular, string actionColor = null, TextSize actionIconSize = TextSize.Small) : this(TextBlock(textContent), Icon.Transform(actionIcon, actionIconWeight), actionColor, actionIconSize)

Initializes a new instance of this class.

Parameters

textContent string
actionIcon UIcons
actionIconWeight UIconsWeight
actionColor string
actionIconSize TextSize

ActionButton(IComponent, string, string, TextSize)

public ActionButton( IComponent contnent, string actionIcon = null, string actionColor = null, TextSize actionIconSize = TextSize.Small)

Initializes a new instance of this class.

Parameters

contnent IComponent
actionIcon string
actionColor string
actionIconSize TextSize

Properties

Name	Description
Container	Gets or sets the container.
DisplayButton	Gets or sets the display button.
ActionBtn	Gets or sets the action btn.
ActionBtnComponent	Gets or sets the action btn component.
Background	Gets or sets the CSS background of the component.
IsDanger	Gets or set whenever button is danger
IsPrimary	Gets or set whenever button is primary
IsEnabled	Gets or sets whenever button is enabled

Property

ActionButton.Container

public HTMLDivElement Container { get; protected set; }

Gets or sets the container.

Property

ActionButton.DisplayButton

public HTMLDivElement DisplayButton { get; protected set; }

Gets or sets the display button.

Property

ActionButton.ActionBtn

public HTMLButtonElement ActionBtn { get; protected set; }

Gets or sets the action btn.

Property

ActionButton.ActionBtnComponent

public IComponent ActionBtnComponent { get; protected set; }

Gets or sets the action btn component.

Property

ActionButton.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Property

ActionButton.IsDanger

public bool IsDanger { get ; set ; }

Gets or set whenever button is danger

Property

ActionButton.IsPrimary

public bool IsPrimary { get ; set ; }

Gets or set whenever button is primary

Property

ActionButton.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets whenever button is enabled

Methods

Name	Description
Render	Renders the component's root HTML element.
OnClickDisplay	Registers a callback invoked when the click display event fires.
OnClickAction	Registers a callback invoked when the click action event fires.
ModifyActionButton	Configures the modify action button on the component.
Primary	Styles the component using the primary tone.
Danger	Styles the component using the danger tone.
Disabled	Disables the component.

Method

ActionButton.Render

public HTMLElement Render()

Renders the component's root HTML element.

Method

ActionButton.OnClickDisplay

public virtual ActionButton OnClickDisplay(ActionButtonEventHandler<HTMLDivElement, MouseEvent> onClick, bool clearPrevious = true)

Registers a callback invoked when the click display event fires.

Method

ActionButton.OnClickAction

public virtual ActionButton OnClickAction(ActionButtonEventHandler<HTMLButtonElement, MouseEvent> onClick, bool clearPrevious = true)

Registers a callback invoked when the click action event fires.

Method

ActionButton.ModifyActionButton

public ActionButton ModifyActionButton(Action<IComponent> modify)

Configures the modify action button on the component.

Method

ActionButton.Primary

public ActionButton Primary()

Styles the component using the primary tone.

Method

ActionButton.Danger

public ActionButton Danger()

Styles the component using the danger tone.

Method

ActionButton.Disabled

public ActionButton Disabled(bool value = true)

Disables the component.

Samples

Basic ActionButton

The following sample demonstrates a basic ActionButton with click handlers for both its display and action areas:

action-button-2-sample.cs

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 BasicActionButtonSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BasicActionButtonSample : IComponent
    {
        public HTMLElement Render()
        {
            return VStack().Children(
                ActionButton("Click Me")
                    .OnClickDisplay((display, evt) => alert("Display clicked!"))
                    .OnClickAction((button, evt)  => alert("Action clicked!"))
            ).Render();
        }
    }
}

Customized ActionButton with Styling

This sample shows how to create an ActionButton with custom icons and styling, as well as how to modify the action button component—for instance, to set a tooltip:

action-button-3-sample.cs

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 CustomActionButtonSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class CustomActionButtonSample : IComponent
    {
        public HTMLElement Render()
        {
            return VStack().Children(
                ActionButton("Custom Action", displayIcon: UIcons.Calendar)
                    .Primary()
                    .OnClickDisplay((display, evt) => alert("Display clicked!"))
                    .OnClickAction((button, evt)  => alert("Action clicked!"))
                    .ModifyActionButton(actionComponent =>
                    {
                        // Add a tooltip to the action button.
                        Raw(actionComponent).Tooltip("This is a custom action");
                    })
            ).Render();
        }
    }
}

ActionButton

Description

Usage

API reference

Constructors

ActionButton

ActionButton(string, UIcons, UIconsWeight, string, TextSize, UIconsWeight, UIcons, string, TextSize)

Parameters

ActionButton(string, UIcons, UIconsWeight, UIcons, string, TextSize)

Parameters

ActionButton(string, UIcons, UIconsWeight, string, TextSize)

Parameters

ActionButton(IComponent, string, string, TextSize)

Parameters

Properties

ActionButton.Container

ActionButton.DisplayButton

ActionButton.ActionBtn

ActionButton.ActionBtnComponent

ActionButton.Background

ActionButton.IsDanger

ActionButton.IsPrimary

ActionButton.IsEnabled

Methods

ActionButton.Render

ActionButton.OnClickDisplay

ActionButton.OnClickAction

ActionButton.ModifyActionButton

ActionButton.Primary

ActionButton.Danger

ActionButton.Disabled

Samples

Basic ActionButton

Customized ActionButton with Styling

See also