Button Group Component
Text only
Segmented control with text labels
razor
<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" },
};
}Icon + text
Leading icon per segment
razor
<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 },
};
}Icon only
Square icon toggle group
razor
<ButtonGroup Items="iconItems"
IconOnly="true"
@bind-SelectedValue="selectedIcon" />Multiple segments
Filter bars with 4+ segments
razor
<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" },
};
}