BlazorUI Demo

Button group

Groups visually connect related actions and can optionally bind a single toggled value.

Shared appearance
Alignment: left
View code 
<BuiStack Gap="3">
    <BuiButtonGroup Size="Size.Small" Variant="Variant.Outlined">
        <BuiButton>Day</BuiButton><BuiButton>Week</BuiButton><BuiButton>Month</BuiButton>
    </BuiButtonGroup>
    <BuiButtonGroup @bind-Value="alignment" Color="Palette.Teal" Variant="Variant.Outlined" SelectVariant="Variant.Filled">
        <BuiButton Value="left" StartIcon="LucideIcons.AlignLeft">Left</BuiButton>
        <BuiButton Value="center" StartIcon="LucideIcons.AlignCenter">Centre</BuiButton>
        <BuiButton Value="right" StartIcon="LucideIcons.AlignRight">Right</BuiButton>
    </BuiButtonGroup>
    <BuiText Typo="Typo.Caption">Alignment: @alignment</BuiText>
</BuiStack>

@code {
    private string alignment = "left";
}