# ButtonGroup ## Description The ButtonGroup joins related buttons into a single unit: a plain action toolbar, or a single-select or multi-select group of toggle buttons. The whole group is one tab stop that the arrow, Home, and End keys navigate, and it follows the WAI-ARIA pattern matching its selection mode. ## Parameters | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | ChildContent | `RenderFragment?` | null | The content of the BitButtonGroup, that are BitButtonGroupOption components. | | IconOnly | `bool` | false | Determines that only the icon should be rendered. | | Classes | `BitButtonGroupClassStyles?` | null | Custom CSS classes for different parts of the ButtonGroup. | | Color | `BitColor?` | null | The general color of the button group. | | DefaultToggleKey | `string?` | null | The default key that will be initially used to set toggled item in toggle mode if the ToggleKey parameter is not set. | | DefaultToggleKeys | `IEnumerable<string>?` | null | The default keys that will be initially used to set the toggled items in the Multiple selection mode if the ToggleKeys parameter is not set. | | Detached | `bool` | false | Detaches the buttons from each other, so each button is rendered as a separate rounded button. | | DisabledInteractive | `bool` | false | Keeps the disabled buttons focusable by rendering them with the aria-disabled attribute instead of the disabled attribute, so that assistive technologies can still discover them. | | FixedToggle | `bool` | false | Enables the fixed-toggle mode that ensures one item to be always toggled. In the Multiple selection mode it prevents un-toggling the last toggled item. | | FullWidth | `bool` | false | Expand the ButtonGroup width to 100% of the available width. | | Gap | `string?` | null | The gap between the buttons of the ButtonGroup in the detached mode. | | Justified | `bool` | false | Gives every button an equal width so that the buttons evenly fill the width of the ButtonGroup. | | 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. | | MaxToggles | `int?` | null | The maximum number of items that can be toggled at the same time in the Multiple selection mode. | | NameSelectors | `BitButtonGroupNameSelectors<TItem>?` | null | Names and selectors of the custom input type properties. | | Navigable | `bool` | true | Enables the roving tabindex behavior, which turns the whole ButtonGroup into a single tab stop that is navigable using the arrow, Home, and End keys. | | OnItemClick | `EventCallback<TItem>` | | The callback that is called when a button is clicked. | | OnToggleChange | `EventCallback<TItem>` | | The callback that called when toggled item change. | | Options | `RenderFragment?` | null | Alias of ChildContent. | | Overflow | `BitButtonGroupOverflow?` | null | Determines how the ButtonGroup behaves when its buttons do not fit in the available space. | | Rounded | `bool` | false | Renders the ButtonGroup with fully rounded (pill shaped) corners. | | SelectionMode | `BitButtonGroupSelectionMode?` | null | Determines how many items can be toggled at the same time. When not set, it falls back to Single if the Toggle parameter is enabled, otherwise None. | | SelectOnFocus | `bool` | false | Toggles the focused item while navigating the ButtonGroup using the keyboard, so that the selection follows the focus. | | ShowSelectionIndicator | `bool` | false | Renders a check mark at the start of the toggled buttons. | | Toggle | `bool` | false | Display ButtonGroup with toggle mode enabled for each button. It is a shorthand of setting the SelectionMode parameter to Single. | | ToggleKey | `string?` | null | The key of the toggled item in the Single selection mode. (two-way bound) | | ToggleKeys | `IEnumerable<string>?` | null | The keys of the toggled items in the Multiple selection mode. (two-way bound) | | Size | `BitSize` | null | The size of ButtonGroup, Possible values: Small | Medium | Large. | | Styles | `BitButtonGroupClassStyles?` | null | Custom CSS styles for different parts of the ButtonGroup. | | Variant | `BitVariant?` | null | The visual variant of the button group. | | Vertical | `bool` | false | Defines whether to render ButtonGroup children vertically. | | AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. | | Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. | | Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. | | ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. | | HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. | | Id | `string?` | null | Gets or sets the unique identifier for the component's root element. | | IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. | | Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. | | TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. | | Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. | ## Public Members | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. | | RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. | ## Enums ### BitVariant Enum | Name | Value | Description | | :--- | :--- | :---------- | | Fill | 0 | Fill styled variant. | | Outline | 1 | Outline styled variant. | | Text | 2 | Text styled variant. | ### BitButtonGroupSelectionMode Enum | Name | Value | Description | | :--- | :--- | :---------- | | None | 0 | The items act as plain action buttons and cannot be toggled. | | Single | 1 | At most one item can be toggled at a time (rendered with the radiogroup accessibility pattern). | | Multiple | 2 | Any number of items can be toggled at the same time (rendered with the toolbar accessibility pattern). | ### BitButtonGroupOverflow Enum | Name | Value | Description | | :--- | :--- | :---------- | | Clip | 0 | The items are kept on a single line and the overflowing part is clipped. | | Wrap | 1 | The items wrap onto multiple lines. | | Scroll | 2 | The items are kept on a single line and the group becomes scrollable, without rendering a scrollbar. It can still be scrolled by swiping, by shift+wheel, and through the arrow keys. | | Scrollbar | 3 | The items are kept on a single line and the group becomes scrollable, with a visible scrollbar. The scrollbar is laid out inside the border of the group, which makes the group taller. | ### BitColor Enum | Name | Value | Description | | :--- | :--- | :---------- | | Primary | 0 | Primary general color. | | Secondary | 1 | Secondary general color. | | Tertiary | 2 | Tertiary general color. | | Info | 3 | Info general color. | | Success | 4 | Success general color. | | Warning | 5 | Warning general color. | | SevereWarning | 6 | Severe Warning general color. | | Error | 7 | Error general color. | | PrimaryBackground | 8 | Primary background color. | | SecondaryBackground | 9 | Secondary background color. | | TertiaryBackground | 10 | Tertiary background color. | | PrimaryForeground | 11 | Primary foreground color. | | SecondaryForeground | 12 | Secondary foreground color. | | TertiaryForeground | 13 | Tertiary foreground color. | | PrimaryBorder | 14 | Primary border color. | | SecondaryBorder | 15 | Secondary border color. | | TertiaryBorder | 16 | Tertiary border color. | ### BitSize 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. | ## Sub Classes ### BitButtonGroupItem Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | AriaLabel | `string?` | null | The accessible label of the item, rendered as the aria-label attribute. Required for icon-only items, and strongly recommended in toggle mode when OnText/OffText are used, so that the accessible name of the item stays the same while its toggle state changes. | | Badge | `string?` | null | The content of the badge rendered at the end of the item, usually a short count. | | Class | `string?` | null | The custom CSS classes of the item. | | Href | `string?` | null | The url of the link rendered by the item. If provided, the item renders as an anchor tag instead of a button. | | Icon | `BitIconInfo?` | null | The icon to render next to the item text. Takes precedence over IconName. | | IconName | `string?` | null | Name of an icon to render next to the item text. | | IsEnabled | `bool` | true | Whether or not the item is enabled. | | IsLoading | `bool` | false | Whether or not the item is in the loading state, which replaces its icon with a spinner and blocks its click. | | Key | `string?` | null | A unique value to use as a Key of the item. | | OffIcon | `BitIconInfo?` | null | The icon of the item when it is not checked in toggle mode. Takes precedence over OffIconName. | | OffIconName | `string?` | null | The icon of the item when it is not checked in toggle mode. | | OffText | `string?` | null | The text of the item when it is not checked in toggle mode. | | OffTitle | `string?` | null | The title of the item when it is not checked in toggle mode. | | OnIcon | `BitIconInfo?` | null | The icon of the item when it is checked in toggle mode. Takes precedence over OnIconName. | | OnIconName | `string?` | null | The icon of the item when it is checked in toggle mode. | | OnText | `string?` | null | The text of the item when it is checked in toggle mode. | | OnTitle | `string?` | null | The title of the item when it is checked in toggle mode. | | OnClick | `EventCallback` | | Click event handler of the item. | | ReversedIcon | `bool` | false | Reverses the positions of the icon and the main content of the item. | | Style | `string?` | null | The custom value for the style attribute of the item. | | Target | `string?` | null | The target attribute of the link when the item renders as an anchor (by providing the Href property). | | Template | `RenderFragment<BitButtonGroupItem>?` | null | The custom template for the item. | | Text | `string?` | null | Text to render in the item. | | Title | `string?` | null | Title to render in the item. | ### BitButtonGroupOption Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | AriaLabel | `string?` | null | The accessible label of the option, rendered as the aria-label attribute. Required for icon-only options, and strongly recommended in toggle mode when OnText/OffText are used, so that the accessible name of the option stays the same while its toggle state changes. | | Badge | `string?` | null | The content of the badge rendered at the end of the option, usually a short count. | | Class | `string?` | null | The custom CSS classes of the option. | | Href | `string?` | null | The url of the link rendered by the option. If provided, the option renders as an anchor tag instead of a button. | | Icon | `BitIconInfo?` | null | The icon to render next to the option text. Takes precedence over IconName. | | IconName | `string?` | null | Name of an icon to render next to the option text. | | IsEnabled | `bool` | true | Whether or not the option is enabled. | | IsLoading | `bool` | false | Whether or not the option is in the loading state, which replaces its icon with a spinner and blocks its click. | | Key | `string?` | null | A unique value to use as a key of the option. | | OffIcon | `BitIconInfo?` | null | The icon of the option when it is not checked in toggle mode. Takes precedence over OffIconName. | | OffIconName | `string?` | null | The icon of the option when it is not checked in toggle mode. | | OffText | `string?` | null | The text of the option when it is not checked in toggle mode. | | OffTitle | `string?` | null | The title of the option when it is not checked in toggle mode. | | OnIcon | `BitIconInfo?` | null | The icon of the option when it is checked in toggle mode. Takes precedence over OnIconName. | | OnIconName | `string?` | null | The icon of the option when it is checked in toggle mode. | | OnText | `string?` | null | The text of the option when it is checked in toggle mode. | | OnTitle | `string?` | null | The title of the option when it is checked in toggle mode. | | OnClick | `EventCallback` | | Click event handler of the option. | | ReversedIcon | `bool` | false | Reverses the positions of the icon and the main content of the option. | | Style | `string?` | null | The custom value for the style attribute of the option. | | Target | `string?` | null | The target attribute of the link when the option renders as an anchor (by providing the Href parameter). | | Template | `RenderFragment<BitButtonGroupOption>?` | null | The custom template for the option. | | Text | `string?` | null | Text to render in the option. | | Title | `string?` | null | Title to render in the option. | ### BitButtonGroupClassStyles Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Root | `string?` | null | Custom CSS classes/styles for the root element of the BitButtonGroup. | | Button | `string?` | null | Custom CSS classes/styles for the internal button of the BitButtonGroup. | | Badge | `string?` | null | Custom CSS classes/styles for the badge of the buttons of the BitButtonGroup. | | Icon | `string?` | null | Custom CSS classes/styles for the icon of the BitButtonGroup. | | SelectionIndicator | `string?` | null | Custom CSS classes/styles for the selection indicator (check mark) of the toggled buttons of the BitButtonGroup. | | Spinner | `string?` | null | Custom CSS classes/styles for the loading spinner of the buttons of the BitButtonGroup. | | Text | `string?` | null | Custom CSS classes/styles for the text of the BitButtonGroup. | | ToggledButton | `string?` | null | Custom CSS classes/styles for the button when in toggle mode of the BitButtonGroup. | ### BitButtonGroupNameSelectors Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | AriaLabel | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.AriaLabel)) | AriaLabel field name and selector of the custom input class. | | Badge | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.Badge)) | Badge field name and selector of the custom input class. | | Class | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.Class)) | The CSS Class field name and selector of the custom input class. | | Href | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.Href)) | Href field name and selector of the custom input class. | | Icon | `BitNameSelectorPair<TItem, BitIconInfo?>` | new(nameof(BitButtonGroupItem.Icon)) | Icon 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. | | IsLoading | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitButtonGroupItem.IsLoading)) | IsLoading 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. | | OffIcon | `BitNameSelectorPair<TItem, BitIconInfo?>` | new(nameof(BitButtonGroupItem.OffIcon)) | OffIcon field name and selector of the custom input class. | | OffIconName | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.OffIconName)) | OffIconName field name and selector of the custom input class. | | OffText | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.OffText)) | OffText field name and selector of the custom input class. | | OffTitle | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.OffTitle)) | OffTitle field name and selector of the custom input class. | | OnIcon | `BitNameSelectorPair<TItem, BitIconInfo?>` | new(nameof(BitButtonGroupItem.OnIcon)) | OnIcon field name and selector of the custom input class. | | OnIconName | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.OnIconName)) | OnIconName field name and selector of the custom input class. | | OnText | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.OnText)) | OnText field name and selector of the custom input class. | | OnTitle | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.OnTitle)) | OnTitle 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. | | ReversedIcon | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitButtonGroupItem.ReversedIcon)) | ReversedIcon 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. | | Target | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.Target)) | Target 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. | | Title | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.Title)) | Title 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. | ### BitIconInfo Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Name | `string?` | null | Gets or sets the name of the icon. | | BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. | | Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. | ## Examples