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:

API reference

class

Button

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

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

Namespace
Tesserae
Inheritance
ComponentBase<Button, HTMLElement> → Button
Implements
ITextFormating, IHasBackgroundColor, IHasForegroundColor, ICanWrap, IRoundedStyle

Constructors

NameDescription
ButtonInitializes a new instance of this class. Give it an href and it becomes a real link - an anchor rather than a button - so it is middle-clickable and shows where it goes in the status bar, while looking exactly like any other button.
Constructor
Button
public Button(string text = string.Empty, string href = null)

Initializes a new instance of this class. Give it an href and it becomes a real link - an anchor rather than a button - so it is middle-clickable and shows where it goes in the status bar, while looking exactly like any other button.

Properties

NameDescription
BackgroundGets or sets the CSS background of the component.
ForegroundGets or sets the CSS color (foreground) of the component.
TextGets or sets button text
TitleGets or sets button title
IconGets or sets button icon (icon class)
IsCompactGets or set whenever button is rendered in a compact form
IsLinkGets or set whenever button is rendered like a link
HrefGets or sets where this button goes. Setting it on a button that was not built with an href has no effect - the element is decided when the button is built.
IsPrimaryGets or set whenever button is primary
IsSuccessGets or set whenever button is primary
IsDangerGets or set whenever button is danger
IsEnabledGets or sets whenever button is enabled
CanWrapGets or sets a value indicating whether the component's text can wrap onto multiple lines.
EnableEllipsisGets or sets a value indicating whether overflowing text is truncated with an ellipsis.
SizeGets or sets the size of the component.
WeightGets or sets the font weight of the component.
TextAlignGets or sets the text alignment of the component.
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.Href
public string Href { get ; set ; }

Gets or sets where this button goes. Setting it on a button that was not built with an href has no effect - the element is decided when the button is built.

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

NameDescription
OpenInNewTabOpens this button's href in a new tab. Only means anything on a button built with one.
RenderRenders the component's root HTML element.
CompactRenders the component in a compact form.
NoMarginRemoves / disables the margin on the component.
NoPaddingRemoves / disables the padding on the component.
LessPaddingReduces the component's padding.
ToSpinnerReplaces the button's content with an inline spinner (commonly used while an async action is in progress).
UndoSpinnerRestores the button's original content after ToSpinner was used.
OnClickSpinWhileRegisters a callback invoked when the click spin while event fires.
OnClickRegisters a callback invoked when the click event fires.
OnContextMenuRegisters a callback invoked when the context menu event fires.
SpinWhileRuns 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).
PrimaryStyles the component using the primary tone.
SuccessStyles the component using the success tone.
DangerStyles the component using the danger tone.
WithFilterEffectsReturns the component configured with the given filter effects.
DisabledDisables the component.
NoBorderRemoves / disables the border on the component.
NoMinSizeRemoves / disables the min size on the component.
NoBackgroundRemoves / disables the background on the component.
LinkOnHoverRenders the component as a hyperlink only on hover.
NoHoverRemoves / disables the hover on the component.
ColorConfigures the component to color.
SetTextSets the text of the component.
SetTitleSets the title of the component.
ClearIconClears the icon.
SetIconSets the icon of the component.
IconOnHoverConfigures the icon on hover on the component.
ReplaceContentReplaces the content in the component.
ReplaceTextReplaces the text in the component.
WrapAllows the component's content to wrap onto multiple lines.
EllipsisConfigures the component to ellipsis.
NoWrapRemoves / disables the wrap on the component.
FocusMoves keyboard focus to the component.
WithHotKeyReturns the component configured with the given hot key.
Method
Button.OpenInNewTab
public Button OpenInNewTab()

Opens this button's href in a new tab. Only means anything on a button built with one.

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.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 ToSpinner was used.

Method
Button.OnClickSpinWhile
Overload
OnClickSpinWhile(Func<Task>, string, Action<Button, Exception>)Registers a callback invoked when the click spin while event fires.
OnClickSpinWhile(Func<MouseEvent, Task>, string, Action<Button, Exception>)Registers a callback invoked when the click spin while event fires.
OnClickSpinWhile(Func<Task>, string, Action<Button, Exception>)
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.

Parameters

action Func<Task>
text string
onError Action<Button, Exception>
OnClickSpinWhile(Func<MouseEvent, Task>, string, Action<Button, Exception>)
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.

Parameters

action Func<MouseEvent, Task>
text string
onError Action<Button, Exception>
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
Overload
SetIcon(Emoji, bool)Sets the icon of the component.
SetIcon(UIcons, string, TextSize, UIconsWeight, bool)Sets the icon of the component.
SetIcon(Emoji, bool)
public Button SetIcon(Emoji icon, bool afterText = false)

Sets the icon of the component.

Parameters

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

Sets the icon of the component.

Parameters

icon UIcons
color string
size TextSize
weight UIconsWeight
afterText bool
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.

ButtonAndIcon

A composite button pairing a label with a trailing icon that has a click handler of its own, for command-bar and toolbar items where the icon opens a menu and the label runs the default action.

class

ButtonAndIcon

public class ButtonAndIcon : Button

A composite button that pairs a label with a leading icon, useful for command-bar and toolbar items.

Namespace
Tesserae
Inheritance
Button → ButtonAndIcon

Constructors

NameDescription
ButtonAndIconInitializes a new instance of this class.
Constructor
ButtonAndIcon
public ButtonAndIcon(string text, IconClickHandler onIconClick, UIcons mainIcon = UIcons.Circle, UIcons secondaryIcon = UIcons.AngleDown)

Initializes a new instance of this class.

Methods

NameDescription
SetSecondaryIconSets the secondary icon of the component.
MaxWidthGets or sets the CSS max-width of the component.
MinWidthGets or sets the CSS min-width of the component.
RenderRenders the component's root HTML element.
Method
ButtonAndIcon.SetSecondaryIcon
Overload
SetSecondaryIcon(UIcons, string, TextSize, UIconsWeight)Sets the secondary icon of the component.
SetSecondaryIcon(Emoji)Sets the secondary icon of the component.
SetSecondaryIcon(UIcons, string, TextSize, UIconsWeight)
public ButtonAndIcon SetSecondaryIcon(UIcons icon, string color = "", TextSize size = TextSize.Small, UIconsWeight weight = UIconsWeight.Regular)

Sets the secondary icon of the component.

Parameters

icon UIcons
color string
size TextSize
weight UIconsWeight
SetSecondaryIcon(Emoji)
public ButtonAndIcon SetSecondaryIcon(Emoji icon)

Sets the secondary icon of the component.

Parameters

icon Emoji
Method
ButtonAndIcon.MaxWidth
public ButtonAndIcon MaxWidth(UnitSize maxWidth)

Gets or sets the CSS max-width of the component.

Method
ButtonAndIcon.MinWidth
public ButtonAndIcon MinWidth(UnitSize minWidth)

Gets or sets the CSS min-width of the component.

Method
ButtonAndIcon.Render
public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Button Usage

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

See also

© 2026 Curiosity. All rights reserved.