# 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:

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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

# Methods

OnClickDisplay(ActionButtonEventHandler<HTMLDivElement, MouseEvent> onClick, bool clearPrevious = true)
Registers a click event handler for the display portion of the button.
• onClick: Delegate to handle the click event.
• clearPrevious: If true, removes any previously registered handlers before adding the new one.
OnClickAction(ActionButtonEventHandler<HTMLButtonElement, MouseEvent> onClick, bool clearPrevious = true)
Registers a click event handler for the action button portion.
• onClick: Delegate to handle the action click event.
• clearPrevious: If true, clears previously registered handlers.
ModifyActionButton(Action modify)
Allows you to modify the inner action button component using a provided action.
• modify: An Action delegate that receives the action button component for further customization.
Primary()
Sets the button styling to primary by updating the relevant CSS classes. Returns the ActionButton instance for chaining.
Danger()
Sets the button styling to danger to indicate a destructive or critical action. Returns the ActionButton instance for chaining.
Disabled(bool value = true)
Enables or disables the button. When disabled, the component updates its state accordingly. Returns the ActionButton instance.
Render()
Renders the complete component, returning an HTMLElement that represents the ActionButton in the DOM.

# Properties

IsDanger (bool)
Gets or sets whether the button is styled as dangerous. Setting this property applies or removes the danger CSS classes on the component.
IsPrimary (bool)
Gets or sets whether the button is styled as primary. Setting this updates the component with the appropriate primary styling classes.
IsEnabled (bool)
Gets or sets whether the entire ActionButton is enabled. Disabling the button applies a specific CSS class that visually represents a disabled state.

# Samples

# Basic ActionButton

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

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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:

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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