HxButtonGroup #
Bootstrap Button groups.
Basic usage #
<HxButtonGroup>
<HxButton Text="Left" Color="ThemeColor.Primary" />
<HxButton Text="Middle" Color="ThemeColor.Primary" />
<HxButton Text="Right" Color="ThemeColor.Primary" />
</HxButtonGroup>Outlined styles #
Button toolbar #
Use HxButtonToolbar and combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you may need some utilities to properly space things.
Sizing #
Nesting #
Place a HxButtonGroup within another HxButtonGroup when you want dropdown menus mixed with a series of buttons.
Vertical orientation #
Checkboxes and radio buttons #
Combine button-like checkbox and radio toggle components into a seamless-looking button group.
Buttons with tooltips #
Adding a Tooltip or TooltipWrapperCssClass to any HxButton adds a wrapping
<span>...</span> to the button (to support tooltips on disabled buttons).
Sometimes the wrapping <span>...</span> breaks the HTML structure expected by some Bootstrap components,
and button groups are one of them. Combining button tooltips with button groups is not supported.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AriaLabel | string |
Groups should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. |
| ChildContent | RenderFragment |
Content of the component. |
| CssClass | string |
Additional CSS class(es) to be added. |
| Orientation | ButtonGroupOrientation |
Orientation. The default value is ButtonGroupOrientation.Horizontal. |
| Size | ButtonGroupSize |
Size. The default value is ButtonGroupSize.Regular. |
HxButtonToolbar #
Bootstrap Button toolbar component.
API #
Parameters #
| Name | Type | Description |
|---|---|---|
| AriaLabel | string |
An explicit label should be set, as most assistive technologies will not announce them otherwise, despite the presence of the correct role attribute. |
| ChildContent | RenderFragment |
The content of the toolbar. |
| CssClass | string |
CSS class(es) to add to the HTML element with the .btn-toolbar class. |