HxButton #
Button (<button type="button">). See also Bootstrap Buttons.
Basic usage #
<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" />Icons #
You can add an icon to the button by using the Icon parameter. The position of the icon can be changed with IconPlacement.
Spinners #
Button will show a spinner whenever the OnClick handler returns an incomplete awaitable Task.
<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 #
EditForm's
OnSubmit events are not captured for spinner automation. Use HxButton's OnClick, OnValidClick, and OnInvalidClick instead.
If (and only if) there are any
OnClick handlers set, the single click protection sets the button to disabled during the callback (usually together with the Spinner).
It is intentionally not set if there is no OnClick handler, as there might be an OnSubmit handler of the containing EditForm
set which would have been blocked if the button is disabled (see above).
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 the Tooltip parameter to set the button's tooltip:
<HxButton Text="Button with a tooltip"
Icon="BootstrapIcon.ClockHistory"
Tooltip="This is a tooltip with a very, very long text. Is this tooltip text length enough? No. So let's make it even longer. And is the tooltip text long enough now? OK..."
Color="ThemeColor.Secondary" />Tooltip, wrapper, and CSS classes #
The <button /> is wrapped with a <span>...</span> wrapper whenever a Tooltip (or TooltipWrapperCssClass) is set.
For most scenarios, you will then use TooltipWrapperCssClass for your layout classes no matter there is a chance the tooltip text remains unset (e.g., in dynamic scenarios).
The wrapping <span>...</span> is always decorated with the .d-inline-block class (combined with TooltipWrapperCssClass) to align the behavior with plain .btn.
Feel free to override the behavior by setting TooltipWrapperCssClass to any other display utility class of your choice.
Sometimes the wrapping <span>...</span> breaks the HTML structure anticipated by some Bootstrap components,
i.e., button-groups (HxButtonGroup). Combining button tooltips with button-groups is not supported.
<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 |
|---|---|---|
| AdditionalAttributes | Dictionary<string, object> |
Additional attributes to be splatted onto an underlying <button> element. |
| ChildContent | RenderFragment |
Button content. |
| Color | ThemeColor? |
Bootstrap button style - theme color. The default is taken from Defaults (ThemeColor.None if not customized). |
| 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. |
| EditContext | EditContext |
Associated EditContext. |
| Enabled | bool? |
When null (default), the Enabled value is received from cascading FormState.
When value is false, input is rendered as disabled.
To set multiple controls as disabled use HxFormState. |
| FormId | string |
Specifies the form the button belongs to. |
| Icon | IconBase |
Icon to render into the button. |
| IconCssClass | string |
CSS class to be rendered with the button icon. |
| IconPlacement | ButtonIconPlacement? |
Position of the icon within the button. The default is ButtonIconPlacement.Start (configurable through Defaults). |
| OnClickPreventDefault | bool |
Prevents the default action for the onclick event. Default is false. |
| OnClickStopPropagation | bool |
Stops onClick-event propagation. Default is true. |
| Outline | bool? |
Bootstrap "outline" button style. |
| Settings | ButtonSettings |
Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters). |
| SingleClickProtection | bool |
Sets false if you want to allow multiple OnClick handlers in parallel. Default is true. |
| Size | ButtonSize? |
Button size. The default is ButtonSize.Regular. |
| Spinner | bool? |
Sets the 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. |
| Text | string |
Text of the button. |
| 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. |
| TooltipCssClass | string |
Custom CSS class to render with the tooltip. |
| TooltipPlacement | TooltipPlacement |
Tooltip placement. |
| 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 whether the Tooltip text is set or not. |
Event callbacks #
| Name | Type | Description |
|---|---|---|
| OnClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked. |
| OnInvalidClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked and EditContext validation fails. |
| OnValidClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked and EditContext validation succeeds. |
Static properties #
| Property | Type | Description |
|---|---|---|
| Defaults | ButtonSettings |
Application-wide defaults for HxButton and derived components. |
CSS variables #
| Name | Description | Default |
|---|---|---|
| --hx-button-gap | Space between the text and icon or other content of the button. | .25rem |
HxSubmit #
Button <button type="submit">.
Direct ancestor of HxButton with the same API.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AdditionalAttributes | Dictionary<string, object> |
Additional attributes to be splatted onto an underlying <button> element. |
| ChildContent | RenderFragment |
Button content. |
| Color | ThemeColor? |
Bootstrap button style - theme color. The default is taken from Defaults (ThemeColor.None if not customized). |
| 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. |
| EditContext | EditContext |
Associated EditContext. |
| Enabled | bool? |
When null (default), the Enabled value is received from cascading FormState.
When value is false, input is rendered as disabled.
To set multiple controls as disabled use HxFormState. |
| FormId | string |
Specifies the form the button belongs to. |
| Icon | IconBase |
Icon to render into the button. |
| IconCssClass | string |
CSS class to be rendered with the button icon. |
| IconPlacement | ButtonIconPlacement? |
Position of the icon within the button. The default is ButtonIconPlacement.Start (configurable through Defaults). |
| OnClickPreventDefault | bool |
Prevents the default action for the onclick event. Default is false. |
| OnClickStopPropagation | bool |
Stops onClick-event propagation. Default is true. |
| Outline | bool? |
Bootstrap "outline" button style. |
| Settings | ButtonSettings |
Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters). |
| SingleClickProtection | bool |
Sets false if you want to allow multiple OnClick handlers in parallel. Default is true. |
| Size | ButtonSize? |
Button size. The default is ButtonSize.Regular. |
| Spinner | bool? |
Sets the 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. |
| Text | string |
Text of the button. |
| 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. |
| TooltipCssClass | string |
Custom CSS class to render with the tooltip. |
| TooltipPlacement | TooltipPlacement |
Tooltip placement. |
| 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 whether the Tooltip text is set or not. |
Event callbacks #
| Name | Type | Description |
|---|---|---|
| OnClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked. |
| OnInvalidClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked and EditContext validation fails. |
| OnValidClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked and EditContext validation succeeds. |
Static properties #
| Property | Type | Description |
|---|---|---|
| Defaults | ButtonSettings |
Application-wide defaults for HxButton and derived components. |