# ButtonGroup
## Description
The ButtonGroup component can be used to group related buttons.
## 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. |
| FullWidth | `bool` | false | Expand the ButtonGroup width to 100% of the available width. |
| 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. |
| OnToggleChange | `EventCallback<TItem>` | | The callback that called when toggled item change. |
| Options | `RenderFragment?` | null | Alias of ChildContent. |
| Toggle | `bool` | false | Display ButtonGroup with toggle mode enabled for each button. |
| ToggleKey | `string?` | null | The key of the toggled item in toggle 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. |
| 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. |
### 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 |
| :--- | :--- | :------------ | :---------- |
| Class | `string?` | null | The custom CSS classes of the item. |
| 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. |
| 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. |
| 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 |
| :--- | :--- | :------------ | :---------- |
| Class | `string?` | null | The custom CSS classes of the option. |
| 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. |
| 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. |
| 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. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon 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 |
| :--- | :--- | :------------ | :---------- |
| Class | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitButtonGroupItem.Class)) | The CSS Class 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. |
| 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. |
| 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
\n**Basic**:
```razor
basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
```
\n**Variant**:
```razor
basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
private List disabledItems =
[
new() { Text = "Add" }, new() { Text = "Edit", IsEnabled = false }, new() { Text = "Delete" }
];
```
\n**Icon**:
```razor
iconItems =
[
new() { Text = "Add", IconName = BitIconName.Add },
new() { Text = "Edit", IconName = BitIconName.Edit },
new() { Text = "Delete", IconName = BitIconName.Delete }
];
```
\n**IconOnly**:
```razor
iconItems =
[
new() { Text = "Add", IconName = BitIconName.Add },
new() { Text = "Edit", IconName = BitIconName.Edit },
new() { Text = "Delete", IconName = BitIconName.Delete }
];
private List onlyIconItems =
[
new() { Text = "Add", IconName = BitIconName.Add },
new() { IconName = BitIconName.Edit },
new() { Text = "Delete", IconName = BitIconName.Delete }
];
```
\n**ReversedIcon**:
```razor
reversedIconItems =
[
new() { Text = "Add", IconName = BitIconName.Add, ReversedIcon = true },
new() { Text = "Edit", IconName = BitIconName.Edit, ReversedIcon = true },
new() { Text = "Delete", IconName = BitIconName.Delete, ReversedIcon = true }
];
```
\n**Toggle**:
```razor
Forward
toggledItems =
[
new() { Key = "back", OnText = "Back (2X)", OffText = "Back (1X)", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind },
new() { Key = "play", OnText = "Resume", OffText = "Play", OnIconName = BitIconName.PlayResume, OffIconName = BitIconName.Play },
new() { Key = "forward", OnText = "Forward (2X)", OffText = "Forward (1X)", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true }
];
private BitButtonGroupItem? onChangeToggleItem;
private List changeToggledItems =
[
new() { Key = "back", OnText = "Back (2X)", OffText = "Back (1X)", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind },
new() { Key = "play", OnText = "Resume", OffText = "Play", OnIconName = BitIconName.PlayResume, OffIconName = BitIconName.Play },
new() { Key = "forward", OnText = "Forward (2X)", OffText = "Forward (1X)", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true }
];
```
\n**Vertical**:
```razor
basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
```
\n**Events**:
```razor
eventsItems =
[
new() { Text = "Increase", IconName = BitIconName.Add },
new() { Text = "Reset", IconName = BitIconName.Reset },
new() { Text = "Decrease", IconName = BitIconName.Remove }
];
protected override void OnInitialized()
{
eventsItems[0].OnClick = _ => { clickCounter++; StateHasChanged(); };
eventsItems[1].OnClick = _ => { clickCounter = 0; StateHasChanged(); };
eventsItems[2].OnClick = _ => { clickCounter--; StateHasChanged(); };
}
```
\n**Size**:
```razor
basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
```
\n**FullWidth**:
```razor
basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
```
\n**Color**:
```razor
basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
```
\n**External Icons**:
```razor
externalIconItems =
[
new() { Text = "Add", Icon = "fa-solid fa-plus" },
new() { Text = "Edit", Icon = BitIconInfo.Css("fa-solid fa-pen") },
new() { Text = "Delete", Icon = BitIconInfo.Fa("solid trash") }
];
```
\n**Style & Class**:
```razor
basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
private List styleClassItems =
[
new()
{
Text = "Styled",
Style = "color: tomato; border-color: brown; background-color: peachpuff;",
IconName = BitIconName.Brush,
},
new()
{
Text = "Classed",
Class = "custom-item",
IconName = BitIconName.FormatPainter,
}
];
```
Toggle key: @toggleKey
Changed toggle: @onChangeToggleItem?.Key , @onChangeToggleItem?.IsToggled
```
```csharp
private string? toggleKey = "play";
private ListClicked item: @clickedItem
Click count: @clickCounter
```
```csharp
private int clickCounter;
private string? clickedItem;
private List