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’ll likely need some utilities though to space things properly.

Sizing #





Nesting #

Place a HxButtonGroup within another HxButtonGroup when you want dropdown menus mixed with a series of buttons.

Vertical orientation #

Checkbox and radio button groups #

Combine button-like checkbox and radio toggle components into a seamless looking button group.

Buttons with tooltips (known issue) #

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. Default is ButtonGroupOrientation.Horizontal.
Size ButtonGroupSize Size. Default 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 otherwise not announce them, despite the presence of the correct role attribute.
ChildContent RenderFragment Toolbar's content
CssClass string CSS class(es) to add to the HTML element with the .btn-toolbar class.
An unhandled error has occurred. Reload 🗙