\n**Basic**: ```razor ``` ```csharp private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**Variant**: ```razor ``` ```csharp private List 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 ``` ```csharp private List iconItems = [ new() { Text = "Add", IconName = BitIconName.Add }, new() { Text = "Edit", IconName = BitIconName.Edit }, new() { Text = "Delete", IconName = BitIconName.Delete } ]; ``` \n**IconOnly**: ```razor ``` ```csharp private List 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, AriaLabel = "Edit" }, new() { Text = "Delete", IconName = BitIconName.Delete } ]; ``` \n**ReversedIcon**: ```razor ``` ```csharp private List 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

Toggle key: @toggleKey

Forward Clear

Changed toggle: @onChangeToggleItem?.Key , @onChangeToggleItem?.IsToggled

``` ```csharp private string? toggleKey = "play"; private List 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 } ]; private List fixedSingleItems = [ new() { Key = "low", Text = "Low" }, new() { Key = "medium", Text = "Medium" }, new() { Key = "high", Text = "High" } ]; ``` \n**Vertical**: ```razor ``` ```csharp private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**Events**: ```razor

Clicked item: @clickedItem

Click count: @clickCounter

``` ```csharp private int clickCounter; private string? clickedItem; private List 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**FullWidth**: ```razor ``` ```csharp private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**Multiple**: ```razor

Toggle keys: @string.Join(", ", formatKeys ?? [])

``` ```csharp private IEnumerable? formatKeys = ["bold"]; private List formatItems = [ new() { Key = "bold", Text = "Bold", IconName = BitIconName.Bold }, new() { Key = "italic", Text = "Italic", IconName = BitIconName.Italic }, new() { Key = "underline", Text = "Underline", IconName = BitIconName.Underline } ]; private readonly string[] maxDefaultKeys = ["bold"]; private List maxToggleItems = [ new() { Key = "bold", Text = "Bold", IconName = BitIconName.Bold }, new() { Key = "italic", Text = "Italic", IconName = BitIconName.Italic }, new() { Key = "underline", Text = "Underline", IconName = BitIconName.Underline } ]; private readonly string[] fixedDefaultKeys = ["bold"]; private List fixedToggleItems = [ new() { Key = "bold", Text = "Bold", IconName = BitIconName.Bold }, new() { Key = "italic", Text = "Italic", IconName = BitIconName.Italic }, new() { Key = "underline", Text = "Underline", IconName = BitIconName.Underline } ]; ``` \n**Justified**: ```razor ``` ```csharp private List justifiedItems = [ new() { Text = "Day" }, new() { Text = "Week" }, new() { Text = "A whole month" } ]; ``` \n**Detached**: ```razor ``` ```csharp private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**Rounded**: ```razor ``` ```csharp private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**Overflow**: ```razor ``` ```csharp private List overflowItems = [ new() { Text = "January" }, new() { Text = "February" }, new() { Text = "March" }, new() { Text = "April" }, new() { Text = "May" }, new() { Text = "June" }, new() { Text = "July" }, new() { Text = "August" }, new() { Text = "September" } ]; ``` \n**SelectionIndicator**: ```razor ``` ```csharp private List indicatorSingleItems = [ new() { Key = "list", Text = "List", IconName = BitIconName.BulletedList }, new() { Key = "grid", Text = "Grid", IconName = BitIconName.GridViewMedium }, new() { Key = "tile", Text = "Tile", IconName = BitIconName.Tiles } ]; private readonly string[] indicatorDefaultKeys = ["name", "size"]; private List indicatorMultipleItems = [ new() { Key = "name", Text = "Name" }, new() { Key = "size", Text = "Size" }, new() { Key = "date", Text = "Date" } ]; ``` \n**Loading & Badge**: ```razor ``` ```csharp private List loadingItems = [ new() { Key = "save", Text = "Save", IconName = BitIconName.Save }, new() { Key = "sync", Text = "Sync", IconName = BitIconName.Sync }, new() { Key = "publish", Text = "Publish", IconName = BitIconName.PublishContent } ]; private List badgeItems = [ new() { Text = "Inbox", IconName = BitIconName.Inbox, Badge = "12" }, new() { Text = "Drafts", IconName = BitIconName.Edit, Badge = "3" }, new() { Text = "Sent", IconName = BitIconName.Send } ]; private async Task HandleLoadingClick(BitButtonGroupItem item) { item.IsLoading = true; StateHasChanged(); await Task.Delay(2000); item.IsLoading = false; StateHasChanged(); } ``` \n**Links**: ```razor ``` ```csharp private List linkItems = [ new() { Text = "Home", IconName = BitIconName.Home, Href = "/" }, new() { Text = "Components", IconName = BitIconName.Puzzle, Href = "/components" }, new() { Text = "GitHub", IconName = BitIconName.OpenInNewWindow, Href = "https://github.com/bitfoundation/bitplatform", Target = "_blank" } ]; ``` \n**Templates**: ```razor

@item.Text

@code { private readonly RenderFragment editItemTemplate = item => @

@item.Text

; } ``` ```csharp private List templateItems = [ new() { Text = "Add", IconName = BitIconName.Add }, new() { Text = "Edit", IconName = BitIconName.Edit }, new() { Text = "Delete", IconName = BitIconName.Delete } ]; private List itemTemplateItems = [ new() { Text = "Add", IconName = BitIconName.Add }, new() { Text = "Edit" }, new() { Text = "Delete", IconName = BitIconName.Delete } ]; protected override void OnInitialized() { itemTemplateItems[1].Template = editItemTemplate; } ``` \n**Tooltips**: ```razor ``` ```csharp private List titleItems = [ new() { Text = "Add", IconName = BitIconName.Add, Title = "Add a new record", AriaLabel = "Add" }, new() { Text = "Edit", IconName = BitIconName.Edit, Title = "Edit the selected record", AriaLabel = "Edit" }, new() { Text = "Delete", IconName = BitIconName.Delete, Title = "Delete the selected record", AriaLabel = "Delete" } ]; private List toggleTitleItems = [ new() { Key = "mute", AriaLabel = "Mute", OnText = "Muted", OffText = "Mute", OnTitle = "The sound is muted, click to unmute", OffTitle = "Click to mute the sound", OnIconName = BitIconName.Volume0, OffIconName = BitIconName.Volume3 }, new() { Key = "repeat", AriaLabel = "Repeat", OnText = "Repeating", OffText = "Repeat", OnTitle = "Repeat is on, click to turn it off", OffTitle = "Click to repeat the playlist", OnIconName = BitIconName.RepeatOne, OffIconName = BitIconName.RepeatAll } ]; ``` \n**Accessibility**: ```razor Focus the group ``` ```csharp private BitButtonGroup? focusGroup; // FocusAsync returns a ValueTask, which an EventCallback cannot be assigned directly. private async Task FocusTheGroup() { if (focusGroup is not null) await focusGroup.FocusAsync(); } private List a11yItems = [ new() { Key = "start", Text = "Start", IconName = BitIconName.AlignLeft, AriaLabel = "Align start" }, new() { Key = "center", Text = "Center", IconName = BitIconName.AlignCenter, AriaLabel = "Align center" }, new() { Key = "end", Text = "End", IconName = BitIconName.AlignRight, AriaLabel = "Align end" } ]; private List selectOnFocusItems = [ new() { Key = "start", Text = "Start", IconName = BitIconName.AlignLeft, AriaLabel = "Align start" }, new() { Key = "center", Text = "Center", IconName = BitIconName.AlignCenter, AriaLabel = "Align center" }, new() { Key = "end", Text = "End", IconName = BitIconName.AlignRight, AriaLabel = "Align end" } ]; private List disabledItems = [ new() { Text = "Add" }, new() { Text = "Edit", IsEnabled = false }, new() { Text = "Delete" } ]; private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**Cascading parameters**: ```razor ``` ```csharp private readonly BitButtonGroupParams[] buttonGroupParams = [ new() { Variant = BitVariant.Outline, Rounded = true, Justified = true, } ]; private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**Color**: ```razor

Disabled:

``` ```csharp private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**External Icons**: ```razor ``` ```csharp private List 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**Size**: ```razor ``` ```csharp private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; ``` \n**Style & Class**: ```razor ``` ```csharp private List basicItems = [ new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" } ]; private List cssVarItems = [ new() { Text = "Add", IconName = BitIconName.Add }, new() { Text = "Edit", IconName = BitIconName.Edit }, new() { Text = "Delete", IconName = BitIconName.Delete, Style = "--bit-ButtonGroup-color: var(--bit-clr-err-text);" + "--bit-ButtonGroup-background: var(--bit-clr-err);" + "--bit-ButtonGroup-hover-background: var(--bit-clr-err-hover);", }, ]; 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, } ]; ```