- bit BlazorUI
Home Docs

ButtonGroup

The ButtonGroup component can be used to group related buttons.

Notes

The BitButtonGroupGroup is a Multi-API component which can accept the list of Items in 3 different ways: BitButtonGroupGroupItem class, a custom Generic class, and BitButtonGroupGroupOption component.

Usage

Implementation

BitButtonGroup parameters
Name
Type
Default value
Description
ButtonStyle BitButtonStyle BitButtonStyle.Primary The style of ButtonGroup, Possible values: Primary | Standard.
Color BitColor null The color of the ButtonGroup.
ItemTemplate RenderFragment<TItem>? null The content inside the item can be customized.
Vertical bool false Defines whether to render ButtonGroup children vertically.
Items IEnumerable<TItem> new List<TItem>() List of Item, each of which can be a Button with different action in the ButtonGroup.
ItemTemplate RenderFragment<TItem>? null The content inside the item can be customized.
NameSelectors BitButtonGroupNameSelectors<TItem>? null Names and selectors of the custom input type properties.
OnItemClick EventCallback<TItem> The callback that is called when a button is clicked.
Options RenderFragment? null Alias of ChildContent.
Size BitButtonSize null The size of ButtonGroup, Possible values: Small | Medium | Large.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitButtonGroupItem properties
Name
Type
Default value
Description
Class string? null The custom CSS classes of the item.
IconName string? null Name of an icon to render next to the item text.
IsEnabled bool true Whether or not the item is enabled.
Key string? null A unique value to use as a Key of the item.
OnClick EventCallback Click event handler of the item.
Style string? null The custom value for the style attribute of the item.
Template RenderFragment<BitButtonGroupItem>? null The custom template for the item.
Text string? null Text to render in the item.
BitButtonGroupOption properties
Name
Type
Default value
Description
Class string? null The custom CSS classes of the option.
IconName string? null Name of an icon to render next to the option text.
IsEnabled bool true Whether or not the option is enabled.
Key string? null A unique value to use as a key of the option.
OnClick EventCallback Click event handler of the option.
Style string? null The custom value for the style attribute of the option.
Template RenderFragment<BitButtonGroupOption>? null The custom template for the option.
Text string? null Text to render in the option.
BitButtonGroupNameSelectors properties
Name
Type
Default value
Description
Class BitNameSelectorPair<TItem, string?> new(nameof(BitButtonGroupItem.Class)) The CSS Class field name and selector of the custom input class.
IconName BitNameSelectorPair<TItem, string?> new(nameof(BitButtonGroupItem.IconName)) IconName field name and selector of the custom input class.
IsEnabled BitNameSelectorPair<TItem, bool> new(nameof(BitButtonGroupItem.IsEnabled)) IsEnabled field name and selector of the custom input class.
Key BitNameSelectorPair<TItem, string?> new(nameof(BitButtonGroupItem.Key)) Key field name and selector of the custom input class.
OnClick BitNameSelectorPair<TItem, Action<TItem>?> new(nameof(BitButtonGroupItem.OnClick)) OnClick field name and selector of the custom input class.
Style BitNameSelectorPair<TItem, string?> new(nameof(BitButtonGroupItem.Style)) Style field name and selector of the custom input class.
Template BitNameSelectorPair<TItem, RenderFragment?> new(nameof(BitButtonGroupItem.Template)) Template field name and selector of the custom input class.
Text BitNameSelectorPair<TItem, string?> new(nameof(BitButtonGroupItem.Text)) Text field name and selector of the custom input class.
BitNameSelectorPair properties
Name
Type
Default value
Description
Name string Custom class property name.
Selector Func<TItem, TProp?>? Custom class property selector.
BitButtonStyle enum
Name
Value
Description
Primary 0 The button with white text on a blue background.
Standard 1 The button with black text on a white background.
Text 2 The button for less-pronounced actions.
BitColor enum
Name
Value
Description
Info 0 Info styled Button.
Success 1 Success styled Button.
Warning 2 Warning styled Button.
SevereWarning 3 Severe Warning styled Button.
Error 4 Error styled Button.
BitButtonSize enum
Name
Value
Description
Small 0 The small size button.
Medium 1 The medium size button.
Large 2 The large size button.
BitButtonType enum
Name
Value
Description
Button 0 The button is a clickable button.
Submit 1 The button is a submit button (submits form-data).
Reset 2 The button is a reset button (resets the form-data to its initial values).
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.