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

<HxButtonGroup>
    <HxButton Text="Left" Color="ThemeColor.Secondary" Outline="true" />
    <HxButton Text="Middle" Color="ThemeColor.Secondary" Outline="true" />
    <HxButton Text="Right" Color="ThemeColor.Secondary" Outline="true" />
</HxButtonGroup>

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

<HxButtonGroup Orientation="ButtonGroupOrientation.Vertical">
    <HxButton Text="Button" Color="ThemeColor.Dark" />
    <HxButton Text="Button" Color="ThemeColor.Dark" />
    <HxButton Text="Button" Color="ThemeColor.Dark" />
    <HxButton Text="Button" Color="ThemeColor.Dark" />
</HxButtonGroup>

API

Parameters

Name Type Description
ChildContent RenderFragment
Size ButtonGroupSize Size. Default is ButtonGroupSize.Regular.
Orientation ButtonGroupOrientation Orientation. Default is ButtonGroupOrientation.Horizontal.
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.
CssClass string Additional CSS class(es) to be added.

HxButtonToolbar

Bootstrap Button toolbar component.

API

Parameters

Name Type Description
ChildContent RenderFragment Toolbar's content
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.
CssClass string CSS class(es) to add to the HTML element with the .btn-toolbar class.
An unhandled error has occurred. Reload 🗙