#
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:
using System;
using System.Threading.Tasks;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;
public class ButtonUsageExample
{
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();
}
}
#
Methods
Below is an overview of the public methods available on the Button component along with their parameters:
Compact() : Button
Renders the button in a compact form.NoMargin() : Button
Removes the default margin from the button.NoPadding() : Button
Removes the default padding from the button.LessPadding() : Button
Applies reduced padding to the button.Link() : Button
Renders the button with link styling.DefaultLink() : Button
Renders the button as a link with a dark theme.DangerLink() : Button
Renders the button as a link styled for danger actions.OnClickSpinWhile(Func
action, string text = null, Action<Button, Exception> onError = null) : Button
Sets an asynchronous click handler that shows a spinner while the task is running.
• action: A function returning a Task to execute on click.
• text: Optional text to display during the spin.
• onError: Optional error handler invoked if the task throws an exception.OnClickSpinWhile(Func<MouseEvent, Task> action, string text = null, Action<Button, Exception> onError = null) : Button
Similar to the above overload, but provides the MouseEvent to the action.OnClick(Action action) : Button
Sets a click handler that executes a synchronous action.OnContextMenu(Action action) : Button
Sets a context menu handler that executes a synchronous action.SpinWhile(Func
action, string text = null, Action<Button, Exception> onError = null) : void
Executes an asynchronous action while displaying a spinner.Primary() : Button
Styles the button as a primary button.Success() : Button
Styles the button to indicate a successful action.Danger() : Button
Styles the button to indicate a dangerous or destructive action.Disabled(bool value = true) : Button
Enables or disables the button.NoBorder() : Button
Removes the border from the button.NoMinSize() : Button
Removes the minimum size constraint from the button.NoBackground() : Button
Removes the background styling from the button, making it transparent.LinkOnHover() : Button
Applies link styling when the button is hovered over.NoHover() : Button
Disables hover effects on the button.Color(string background, string textColor = "white", string borderColor = "white", string iconColor = "") : Button
Sets custom colors on the button.
• background: Background color.
• textColor: Text color.
• borderColor: Border color.
• iconColor: Optional icon color.SetText(string text) : Button
Sets the text displayed on the button.SetTitle(string title) : Button
Sets the tooltip title of the button.ClearIcon() : Button
Removes any icon from the button.SetIcon(Emoji icon, bool afterText = false) : Button
Sets an emoji icon on the button.
• icon: The emoji icon value.
• afterText: If true, positions the icon after the text.SetIcon(UIcons icon, string color = "", TextSize size = TextSize.Small, UIconsWeight weight = UIconsWeight.Regular, bool afterText = false) : Button
Sets an icon from UIcons on the button with customizable color, text size, and weight.
• icon: The icon identifier.
• color: Icon color.
• size: Text size for the icon.
• weight: Icon weight.
• afterText: If true, places the icon after the text.IconOnHover() : Button
Allows the icon to be visible only on hover.ReplaceContent(IComponent content) : Button
Replaces the button’s content with a custom component.ReplaceText(HTMLSpanElement textSpan) : Button
Replaces the text span element of the button.Wrap() : Button
Allows the button text to wrap onto multiple lines.Ellipsis() : Button
Enables text ellipsis on overflow.NoWrap() : Button
Disables text wrapping.Focus() : Button
Sets focus on the button element.WithHotKey(string keys, Hotkeys.Option options = null) : Button
Binds hotkeys to trigger the button’s click action.
• keys: A string representing the hotkey combination.
• options: Optional hotkey options.
#
Properties
The following public properties can be used to configure the Button:
Background (string)
Gets or sets the background color of the button.Foreground (string)
Gets or sets the text color of the button.Text (string)
Gets or sets the button label text.
When set to an empty string, the button’s minimum width constraints are adjusted accordingly.Title (string)
Gets or sets the tooltip title of the button.Icon (string)
Gets or sets the CSS class for the button’s icon. Setting this to an empty string or null will remove the icon.IsCompact (bool)
Gets or sets whether the button is rendered in a compact form.IsLink (bool)
Gets or sets whether the button is styled like a link.IsPrimary (bool)
Gets or sets whether the button is styled as primary.IsSuccess (bool)
Gets or sets whether the button is styled to indicate success.IsDanger (bool)
Gets or sets whether the button is styled to indicate a dangerous action.IsEnabled (bool)
Gets or sets whether the button is enabled or disabled.CanWrap (bool)
Gets or sets whether the button text can wrap onto multiple lines.EnableEllipsis (bool)
Gets or sets whether the button text should show ellipsis when overflowing.Size (TextSize)
Gets or sets the text size of the button’s content.Weight (TextWeight)
Gets or sets the font weight of the button’s text.TextAlign (TextAlign)
Gets or sets the text alignment within the button.
#
Samples
#
Basic Button Usage
The following sample creates a group of buttons showcasing standard, primary, link, icon, and spinner buttons:
using System;
using System.Threading.Tasks;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;
public class ButtonSampleUsage
{
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();
}
}