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
public class Button : ComponentBase<Button, HTMLButtonElement>, ITextFormating, IHasBackgroundColor, IHasForegroundColor, ICanWrap, IRoundedStyleThe 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
| Name | Description |
|---|---|
| Button | Initializes a new instance of this class. |
Properties
| Name | Description |
|---|---|
| Background | Gets or sets the CSS background of the component. |
| Foreground | Gets or sets the CSS color (foreground) of the component. |
| Text | Gets or sets button text |
| Title | Gets or sets button title |
| Icon | Gets or sets button icon (icon class) |
| IsCompact | Gets or set whenever button is rendered in a compact form |
| IsLink | Gets or set whenever button is rendered like a link |
| IsPrimary | Gets or set whenever button is primary |
| IsSuccess | Gets or set whenever button is primary |
| IsDanger | Gets or set whenever button is danger |
| IsEnabled | Gets or sets whenever button is enabled |
| CanWrap | Gets or sets a value indicating whether the component's text can wrap onto multiple lines. |
| EnableEllipsis | Gets or sets a value indicating whether overflowing text is truncated with an ellipsis. |
| Size | Gets or sets the size of the component. |
| Weight | Gets or sets the font weight of the component. |
| TextAlign | Gets or sets the text alignment of the component. |
public string Background { get ; set ; }Gets or sets the CSS background of the component.
public string Foreground { get ; set ; }Gets or sets the CSS color (foreground) of the component.
public bool IsCompact { get ; set ; }Gets or set whenever button is rendered in a compact form
public bool IsLink { get ; set ; }Gets or set whenever button is rendered like a link
public bool IsEnabled { get ; set ; }Gets or sets whenever button is enabled
public bool CanWrap { get ; set ; }Gets or sets a value indicating whether the component's text can wrap onto multiple lines.
public bool EnableEllipsis { get ; set ; }Gets or sets a value indicating whether overflowing text is truncated with an ellipsis.
public TextWeight Weight { get ; set ; }Gets or sets the font weight of the component.
Methods
| Name | Description |
|---|---|
| Render | Renders the component's root HTML element. |
| Compact | Renders the component in a compact form. |
| NoMargin | Removes / disables the margin on the component. |
| NoPadding | Removes / disables the padding on the component. |
| LessPadding | Reduces the component's padding. |
| Link | Renders the component as a hyperlink. |
| DefaultLink | Renders the component as a default-toned hyperlink. |
| DangerLink | Renders the component as a danger-toned hyperlink. |
| ToSpinner | Replaces the button's content with an inline spinner (commonly used while an async action is in progress). |
| UndoSpinner | Restores the button's original content after ToSpinner was used. |
| OnClickSpinWhile | Registers a callback invoked when the click spin while event fires. |
| OnClick | Registers a callback invoked when the click event fires. |
| OnContextMenu | Registers a callback invoked when the context menu event fires. |
| SpinWhile | 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). |
| Primary | Styles the component using the primary tone. |
| Success | Styles the component using the success tone. |
| Danger | Styles the component using the danger tone. |
| WithFilterEffects | Returns the component configured with the given filter effects. |
| Disabled | Disables the component. |
| NoBorder | Removes / disables the border on the component. |
| NoMinSize | Removes / disables the min size on the component. |
| NoBackground | Removes / disables the background on the component. |
| LinkOnHover | Renders the component as a hyperlink only on hover. |
| NoHover | Removes / disables the hover on the component. |
| Color | Configures the component to color. |
| SetText | Sets the text of the component. |
| SetTitle | Sets the title of the component. |
| ClearIcon | Clears the icon. |
| SetIcon | Sets the icon of the component. |
| IconOnHover | Configures the icon on hover on the component. |
| ReplaceContent | Replaces the content in the component. |
| ReplaceText | Replaces the text in the component. |
| Wrap | Allows the component's content to wrap onto multiple lines. |
| Ellipsis | Configures the component to ellipsis. |
| NoWrap | Removes / disables the wrap on the component. |
| Focus | Moves keyboard focus to the component. |
| WithHotKey | Returns the component configured with the given hot key. |
public Button DefaultLink()Renders the component as a default-toned hyperlink.
public void ToSpinner(string text = null)Replaces the button's content with an inline spinner (commonly used while an async action is in progress).
public void UndoSpinner()Restores the button's original content after ToSpinner was used.
| 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>
public Button OnClick(Action action)Registers a callback invoked when the click event fires.
public Button OnContextMenu(Action action)Registers a callback invoked when the context menu event fires.
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).
public Button WithFilterEffects()Returns the component configured with the given filter effects.
public Button NoBackground()Removes / disables the background on the component.
public Button LinkOnHover()Renders the component as a hyperlink only on hover.
public Button Color(string background, string textColor = "white", string borderColor = "white", string iconColor = "")Configures the component to color.
| 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
public Button ReplaceContent(IComponent content)Replaces the content in the component.
public Button ReplaceText(HTMLSpanElement textSpan)Replaces the text in the component.
Samples
Basic Button Usage
The following sample creates a group of buttons showcasing standard, primary, link, icon, and spinner buttons: