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

Constructors

Constructor

ActionButton

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.

Constructor

ActionButton

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.

Constructor

ActionButton

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.

Constructor

ActionButton

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

Initializes a new instance of this class.

Properties

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

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.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 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.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 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();
        }
    }
}

Referenced by

Link

ActionButton

Description

Usage

API reference

Constructors

ActionButton

ActionButton

ActionButton

ActionButton

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

Referenced by