Button Group Component

<ButtonGroup Items="textItems" @bind-SelectedValue="selectedText" />

@code {
    private string? selectedText = "option1";

    private List<ButtonGroup.ButtonGroupItem> textItems = new()
    {
        new() { Text = "Option 1", Value = "option1" },
        new() { Text = "Option 2", Value = "option2" },
        new() { Text = "Option 3", Value = "option3" },
    };
}

<ButtonGroup Items="iconTextItems"
             @bind-SelectedValue="selectedIconText" />

@code {
    private List<ButtonGroup.ButtonGroupItem> iconTextItems = new()
    {
        new() { Text = "List",  Value = "list",  Icon = ListIcon },
        new() { Text = "Grid",  Value = "grid",  Icon = GridIcon },
        new() { Text = "Board", Value = "board", Icon = BoardIcon },
    };
}

<ButtonGroup Items="iconItems"
             IconOnly="true"
             @bind-SelectedValue="selectedIcon" />

<ButtonGroup Items="viewItems"   @bind-SelectedValue="selectedView" />
<ButtonGroup Items="periodItems" @bind-SelectedValue="selectedPeriod" />

@code {
    private List<ButtonGroup.ButtonGroupItem> viewItems = new()
    {
        new() { Text = "All",      Value = "all" },
        new() { Text = "Active",   Value = "active" },
        new() { Text = "Draft",    Value = "draft" },
        new() { Text = "Archived", Value = "archived" },
    };
}

Button Group Component

Text only

Icon + text

Icon only

Multiple segments