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, HTMLButtonElement>, 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, HTMLButtonElement> → Button
Implements
ITextFormating, IHasBackgroundColor, IHasForegroundColor, ICanWrap, IRoundedStyle

Constructors

NameDescription
ButtonInitializes a new instance of this class.
Constructor
Button
public Button(string text = string.Empty)

Initializes a new instance of this class.

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
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.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
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.
LinkRenders the component as a hyperlink.
DefaultLinkRenders the component as a default-toned hyperlink.
DangerLinkRenders the component as a danger-toned hyperlink.
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.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.

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.