HxButton

Button (<button type="button">). See also Bootstrap Buttons.

Demo

<HxButton Text="Basic Button" Color="ThemeColor.Primary" />

Several predefined button styles are included, each serving its own semantic purpose, with a few extras thrown in for more control.

Outline buttons

You can remove the background with Outline="true":

Sizes

<HxButton Text="Large" Size="ButtonSize.Large" Color="ThemeColor.Primary" />
<HxButton Text="Large" Size="ButtonSize.Large" Color="ThemeColor.Primary" />
<HxButton Text="Small" Size="ButtonSize.Small" Color="ThemeColor.Primary" />
<HxButton Text="Small" Size="ButtonSize.Small" Color="ThemeColor.Primary" />

Spinners

<HxButton Text="Button with a Spinner" Size="ButtonSize.Regular" Color="ThemeColor.Primary" OnClick="async () => await Task.Delay(2000)" />

OnValidClick with spinner

Manual Spinner

Spinner & Single click protection

Button with a badge

<HxButton Color="ThemeColor.Primary">
    Send all <span class="badge bg-secondary">15</span>
</HxButton>

Button with a tooltip

You can use Tooltip parameter to set button's tooltip:

<HxButton Text="Button with a tooltip" Icon="BootstrapIcon.ClockHistory" Tooltip="This is a tooltip with  very very long text. Is this tooltip text length enought? No. So let's make it even longer. And is the tooltip text long enought now? OK..." Color="ThemeColor.Secondary" />

Tooltip, wrapper and CSS classes

<div class="d-flex">
	<HxButton Text="Button with a tooltip"
			  Icon="BootstrapIcon.ClockHistory"
			  Color="ThemeColor.Secondary"
			  Tooltip="This is a tooltip with .text-uppercase."
			  TooltipCssClass="text-uppercase"
			  TooltipWrapperCssClass="ms-auto" />
</div>

API

Parameters

Name Type Description
Text string Text of the button.
ChildContent RenderFragment Button content.
Icon IconBase Icon to render into the button.
Color ThemeColor? Bootstrap button style - theme color.
Default is taken from HxButton.Defaults (ThemeColor.None if not customized).
Size ButtonSize? Button size. Default is ButtonSize.Regular.
Outline bool? Bootstrap "outline" button style.
CssClass string Custom CSS class to render with the <button />.
When using Tooltip you might want to use TooltipWrapperCssClass instead of CssClass to get the desired result.
Enabled bool?
EditContext EditContext Associated EditContext.
FormId string Specifies the form the button belongs to.
Tooltip string Tooltip text.
If set, a span wrapper will be rendered around the <button />. For most scenarios you will then use TooltipWrapperCssClass instead of CssClass.
TooltipPlacement TooltipPlacement Tooltip placement.
TooltipCssClass string Custom CSS class to render with the tooltip.
TooltipWrapperCssClass string Custom CSS class to render with the tooltip span wrapper of the <button />.
If set, the span wrapper will be rendered no matter the Tooltip text is set or not.
OnClickStopPropagation bool Stop onClick-event propagation. Deafult is true.
OnClickPreventDefault bool Prevents the default action for the onclick event. Deafult is false.
Spinner bool? Set state of the embedded HxSpinner. Leave null if you want automated spinner when any of the OnClick handlers is running. You can set an explicit false constant to disable (override) the spinner automation.
SingleClickProtection bool Set false if you want to allow multiple OnClick handlers in parallel. Default is true.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <button> element.

Event Callbacks

Name Type Description
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnValidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation succeeds.
OnInvalidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation fails.

Static properties

Property Type Description
Defaults ButtonDefaults Application-wide defaults for HxButton and derived components.

HxSubmit

Button <button type="submit">. Direct ancestor of HxButton with the same API.

API

Parameters

Name Type Description
Text string Text of the button.
ChildContent RenderFragment Button content.
Icon IconBase Icon to render into the button.
Color ThemeColor? Bootstrap button style - theme color.
Default is taken from HxButton.Defaults (ThemeColor.None if not customized).
Size ButtonSize? Button size. Default is ButtonSize.Regular.
Outline bool? Bootstrap "outline" button style.
CssClass string Custom CSS class to render with the <button />.
When using Tooltip you might want to use TooltipWrapperCssClass instead of CssClass to get the desired result.
Enabled bool?
EditContext EditContext Associated EditContext.
FormId string Specifies the form the button belongs to.
Tooltip string Tooltip text.
If set, a span wrapper will be rendered around the <button />. For most scenarios you will then use TooltipWrapperCssClass instead of CssClass.
TooltipPlacement TooltipPlacement Tooltip placement.
TooltipCssClass string Custom CSS class to render with the tooltip.
TooltipWrapperCssClass string Custom CSS class to render with the tooltip span wrapper of the <button />.
If set, the span wrapper will be rendered no matter the Tooltip text is set or not.
OnClickStopPropagation bool Stop onClick-event propagation. Deafult is true.
OnClickPreventDefault bool Prevents the default action for the onclick event. Deafult is false.
Spinner bool? Set state of the embedded HxSpinner. Leave null if you want automated spinner when any of the OnClick handlers is running. You can set an explicit false constant to disable (override) the spinner automation.
SingleClickProtection bool Set false if you want to allow multiple OnClick handlers in parallel. Default is true.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <button> element.

Event Callbacks

Name Type Description
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnValidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation succeeds.
OnInvalidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation fails.
An unhandled error has occurred. Reload 🗙