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 #

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.
An unhandled error has occurred. Reload 🗙